2017-02-08 10 views
0

현재 마우스 오버시 내비게이션 막대 요소를 늘리려고합니다. 하지만 마우스 오버시 웹 사이트의 나머지 부분이 약간 움직이면서 끔찍하게 보입니다. 웹 사이트의 다른 요소에 영향을주지 않고 내비게이션 막대의 텍스트를 더 크게 만들 수있는 방법이 있습니까?마차가없는 호버 크기의 CSS

nav { 
 
    text-align:center; 
 
    margin-top: 20px; 
 
    margin-bottom: -4px; 
 
} 
 

 
.nav{ 
 
    text-decoration: none; 
 
    color: black; 
 
    text-transform:uppercase; 
 
    font-weight: 600; 
 
    padding: 5px; 
 
    font-family: calibri; 
 
    padding-top: 2px; 
 
    transition-property: all; 
 
    transition-duration: 500ms; 
 
} 
 

 
.nav:hover { 
 
    font-size: 130%; 
 
    opacity: 0.6;  
 
} 
 

 
.LLHashtag { 
 
    width: 370px; 
 
    margin: 0 Auto; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    margin-top: 5px; 
 
    font-size: 50px; 
 
    text-transform:uppercase; 
 
    font-weight: 600; 
 
    color: black; 
 
    border-top: solid black 2px; 
 
    font-family: "helvetica Neue"; 
 
    font-weight: 400; 
 
}
<nav> 
 
    <a class="nav" href="http://www.google.de">Home</a> 
 
    <a class="nav" href="http://www.google.de">Über</a> 
 
    <a class="nav" href="http://www.google.de">Motivation</a> 
 
    <a class="nav" href="http://www.google.de">Kontakt</a> 
 
    <a class="nav" href="http://www.google.de">Impressum</a> 
 
    </nav> 
 
    <h1 class="LLHashtag">#LifeLetics</h1>

+0

코드를 첨부하십시오. –

+0

먼저 코드를 게시해야합니다 –

+0

코드를 첨부하십시오. –

답변

0

예 당신은 당신의 네비게이션 바 예에 텍스트 변환 CSS를 사용할 수 있습니다

.element:hover{ 
    transform: scale(1.2); 
} 

transform: scale(1.2)
또한 헤더에이 규칙을 적용 할 display: inline-block;가 필요합니다 페이지에 다른 콘텐츠에 영향을

nav { 
 
    text-align: center; 
 
    margin-top: 20px; 
 
    margin-bottom: -4px; 
 
} 
 
.nav { 
 
    text-decoration: none; 
 
    color: black; 
 
    text-transform: uppercase; 
 
    font-weight: 600; 
 
    padding: 5px; 
 
    font-family: calibri; 
 
    padding-top: 2px; 
 
    transition-property: transform; 
 
    transition-duration: 500ms; 
 
    display: inline-block; 
 
} 
 
.nav:hover { 
 
    opacity: 0.6; 
 
    transform: scale(1.2); 
 
    backface-visibility: hidden; 
 
} 
 
.LLHashtag { 
 
    width: 370px; 
 
    margin: 0 Auto; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    margin-top: 5px; 
 
    font-size: 50px; 
 
    text-transform: uppercase; 
 
    font-weight: 600; 
 
    color: black; 
 
    border-top: solid black 2px; 
 
    font-family: "helvetica Neue"; 
 
    font-weight: 400; 
 
}
<nav> 
 
    <a class="nav" href="http://www.google.de">Home</a> 
 
    <a class="nav" href="http://www.google.de">Über</a> 
 
    <a class="nav" href="http://www.google.de">Motivation</a> 
 
    <a class="nav" href="http://www.google.de">Kontakt</a> 
 
    <a class="nav" href="http://www.google.de">Impressum</a> 
 
</nav> 
 
<h1 class="LLHashtag">#LifeLetics</h1>

+0

도움을 주셔서 감사합니다. 그러나 그런 식으로 작동하지 않습니다. – Jahrens

+0

@ Jahrens 최소 작업 예제 (html + css)를 제공해야합니다. 가장 쉬운 방법은'edit question' 양식에서'add snippet' 버튼을 사용하는 것입니다. – godblessstrawberry

+0

고마워요, 제가 그것을 삽입했습니다. – Jahrens

0

당신은 transform: scale(1.2)를 사용하려고 할 수 있습니다 연결되지 않습니다 . 1.2을 원하는 크기로 변경하는 것을 잊지 마십시오.