호버 변형 지터 CSS

Question

호버 속성에서 CSS transformY를 사용할 때 사용자가 네비게이션 요소의 상단 부분에 마우스를 올려 놓았을 때 상자가 호버를 감지하고 따라서 밖으로 나가기 때문에 상자가 아래로 움직 였으므로 지터가 발생합니다. 그러면 커서가 hover 속성을 제거하게되므로 변환이 제거됩니다. 이 지터가 발생하지 않도록 도움을 받고 싶지만 개별 탭 이동을 수행했습니다. 나는 이것을 달성하기 위해 부트 스트랩과 내 자신의 코드의 조합을 사용하고있다.

당신은 데모 여기서 무슨 뜻인지 알 수

:

이

https://jsfiddle.net/b5vjw9wk/1/

HTML :

이

<nav class="navbar navbar-full navbar-default navbar-bottom navbar-drop-shadow"> 
    <div class="container-fluid"> 
    <div class="row-flex-nav"> 
     <div class="col-flex-3 center active-nav" id="NewHires"> 
     <h4>Active Nav</h4> 
     </div> 
     <div class="col-flex-3 center non-active-nav" id="Transfers"> 
     <h4>Non Active</h4> 
     </div> 
     <div class="col-flex-3 center non-active-nav" id="Leaving"> 
     <h4>Non Active</h4> 
     </div> 
    </div> 
    </div> 
</nav> 

CSS :

.navbar { 
    background-color: rgb(110,14,24); 
    border: 0px; 
} 
.navbar-drop-shadow { 
    -webkit-box-shadow: 0 8px 6px -6px rgba(0,0,0,0.75); 
    -moz-box-shadow: 0 8px 6px -6px rgba(0,0,0,0.75); 
      box-shadow: 0 8px 6px -6px rgba(0,0,0,0.75); 
} 
.non-active-nav { 
    color: white; 
    -webkit-transition: transform .06s; /* Safari */ 
    transition: transform .06s; 
} 
.non-active-nav:hover { 
    background: rgb(110,14,24); 
    -webkit-box-shadow: 0 6px 4px -3px rgba(0,0,0,0.75); 
    -moz-box-shadow: 0 6px 4px -3px rgba(0,0,0,0.75); 
      box-shadow: 0 6px 4px -3px rgba(0,0,0,0.75); 
    transform: translateY(10px); 
    border-radius: 3px; 
} 
html, body { 
    background: rgb(75,75,75); 
} 
.active-nav{ 
    color: white; 
    background: rgb(75,75,75); 
    -moz-box-shadow: inset 0 7px 9px -5px rgba(0,0,0,0.75); 
    -webkit-box-shadow: inset 0 7px 9px -5px rgba(0,0,0,0.75); 
    box-shadow:   inset 0 7px 9px -5px rgba(0,0,0,0.75); 
    transform: translateY(10px); 
} 
.navbar-bottom { 
    min-height: 25px; 
} 
.center { 
    text-align: center; 
} 

.no-margin{ 
    margin: 0px; 
} 

.row-flex-nav { 
    width: 100%; 
    display: -webkit-flex; 
    display: flex; 
    flex-wrap: wrap; 
} 

.col-flex-3 { 
    flex-grow: 1; 
    width: 33.33%; 
} 

당신이 줄 수있는 어떤 도움을 크게 감상 할 수있다

Answer 1

이전에 사용한 기술 중 하나는 투명 테두리와 음수 여백을 요소 상단에 추가하여 요소가 전환 될 때 요소 위로 마우스를 가져갈 수 없도록하는 것입니다.

.non-active-nav { 
    color: white; 
    -webkit-transition: transform .06s; /* Safari */ 
    transition: transform .06s; 

    border-top: 10px solid transparent; 
    margin-top: -10px; /* equal to border width */ 
} 

예 :

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"); 
 

 
.navbar { 
 
\t background-color: rgb(110,14,24); 
 
\t border: 0px; 
 
} 
 
.navbar-drop-shadow { 
 
\t -webkit-box-shadow: 0 8px 6px -6px rgba(0,0,0,0.75); 
 
\t -moz-box-shadow: 0 8px 6px -6px rgba(0,0,0,0.75); 
 
\t \t \t box-shadow: 0 8px 6px -6px rgba(0,0,0,0.75); 
 
} 
 
.non-active-nav { 
 
\t color: white; 
 
\t -webkit-transition: transform .06s; /* Safari */ 
 
    transition: transform .06s; 
 
    border-top: 10px solid transparent; 
 
    margin-top: -10px; 
 
} 
 
.non-active-nav:hover { 
 
\t background: rgb(110,14,24); 
 
\t -webkit-box-shadow: 0 6px 4px -3px rgba(0,0,0,0.75); 
 
\t -moz-box-shadow: 0 6px 4px -3px rgba(0,0,0,0.75); 
 
\t \t \t box-shadow: 0 6px 4px -3px rgba(0,0,0,0.75); 
 
\t transform: translateY(10px); 
 
\t border-radius: 3px; 
 
} 
 
html, body { 
 
\t background: rgb(75,75,75); 
 
} 
 
.active-nav{ 
 
\t color: white; 
 
\t background: rgb(75,75,75); 
 
\t -moz-box-shadow: inset 0 7px 9px -5px rgba(0,0,0,0.75); 
 
    -webkit-box-shadow: inset 0 7px 9px -5px rgba(0,0,0,0.75); 
 
    box-shadow:   inset 0 7px 9px -5px rgba(0,0,0,0.75); 
 
    transform: translateY(10px); 
 
} 
 
.navbar-bottom { 
 
\t min-height: 25px; 
 
} 
 
.center { 
 
\t text-align: center; 
 
} 
 

 
.no-margin{ 
 
\t margin: 0px; 
 
} 
 

 
.row-flex-nav { 
 
\t width: 100%; 
 
    display: -webkit-flex; 
 
\t display: flex; 
 
\t flex-wrap: wrap; 
 
} 
 

 
.col-flex-3 { 
 
\t flex-grow: 1; 
 
\t width: 33.33%; 
 
}

<nav class="navbar navbar-full navbar-default navbar-bottom navbar-drop-shadow"> 
 
    <div class="container-fluid"> 
 
    <div class="row-flex-nav"> 
 
     <div class="col-flex-3 center active-nav" id="NewHires"> 
 
     <h4>Active Nav</h4> 
 
     </div> 
 
     <div class="col-flex-3 center non-active-nav" id="Transfers"> 
 
     <h4>Non Active</h4> 
 
     </div> 
 
     <div class="col-flex-3 center non-active-nav" id="Leaving"> 
 
     <h4>Non Active</h4> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</nav>

Updated Fiddle