2016-12-08 5 views
0

Shift 키를 누르지 않고 'Myriam lefebvre'텍스트와 'Développeure-front-end'텍스트를 포함하는 div를 어떻게 움직일 수 있습니까?이동 효과없이 두 요소 가져 오기

.logo__name { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    padding: 10px; 
 
    padding-bottom: 15px; 
 
} 
 

 
.logo__name:hover { 
 
    background-color: #e54b4b; 
 
} 
 

 
.logo__name:hover h1 { 
 
    color: #ffffff; 
 
    transition: all 300ms ease; 
 
} 
 

 
.logo__name:hover h1 span { 
 
    transition: all 300ms ease; 
 
    color: #ffffff; 
 
} 
 

 
.logo__name h1 { 
 
    font-family: 'Sacramento', Cursive; 
 
    font-size: 2rem; 
 
    font-weight: normal; 
 
    margin: 0; 
 
    padding: 0; 
 
    transition: all 300ms ease; 
 
    text-align: center; 
 
} 
 

 
.logo__name h1 div { 
 
    height: 33px; 
 
    overflow: hidden; 
 
} 
 

 
.logo__name h1 span { 
 
    font-family: 'Pt Serif', Serif; 
 
    font-size: 0.85rem; 
 
    text-transform: uppercase; 
 
    margin-top: -50px; 
 
    display: block; 
 
    transition: all 300ms ease; 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    \t \t <link href="https://fonts.googleapis.com/css?family=PT+Serif:400,700|Sacramento|Pathway+Gothic+One" rel="stylesheet"> 
 
    <title>Myriam Lefebvre</title> 
 
</head> 
 
<body> 
 
<div class="logo__name"> 
 
\t <h1><div>Myriam lefebvre</div><br /><span>Développeure-front-end</span></h1> 
 
</div> 
 
</body> 
 
</html>
코드가 단축 된 예를 들어

, 내 코드는 더 복잡하다. 감사!

답변

2

'.logo__name', '.logo__name h1 div', '.logo__name h1 span'태그에만 전환 문을 사용해 보았습니다. 비 호버 버전에 이미 암시되어 있으므로 호버 태그에 필요하지 않아야합니다. 이게 당신이 찾는거야?

.logo__name { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    padding: 10px; 
 
    padding-bottom: 15px; 
 
    transition: all 300ms ease; 
 
} 
 

 
.logo__name:hover { 
 
    background-color: #e54b4b; 
 
} 
 

 
.logo__name:hover h1 { 
 
    color: #ffffff; 
 
} 
 

 
.logo__name:hover h1 span { 
 
    color: #ffffff; 
 
} 
 

 
.logo__name h1 { 
 
    font-family: 'Sacramento', Cursive; 
 
    font-size: 2rem; 
 
    font-weight: normal; 
 
    margin: 0; 
 
    padding: 0; 
 
    text-align: center; 
 
} 
 

 
.logo__name h1 div { 
 
    height: 33px; 
 
    overflow: hidden; 
 
    transition: all 300ms ease; 
 
} 
 

 
.logo__name h1 span { 
 
    font-family: 'Pt Serif', Serif; 
 
    font-size: 0.85rem; 
 
    text-transform: uppercase; 
 
    margin-top: -50px; 
 
    display: block; 
 
    transition: all 300ms ease; 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    \t \t <link href="https://fonts.googleapis.com/css?family=PT+Serif:400,700|Sacramento|Pathway+Gothic+One" rel="stylesheet"> 
 
    <title>Myriam Lefebvre</title> 
 
</head> 
 
<body> 
 
<div class="logo__name"> 
 
\t <h1><div>Myriam lefebvre</div><br /><span>Développeure-front-end</span></h1> 
 
</div> 
 
</body> 
 
</html>