다음과 함께 상위 호버에있는 하위 스타일을 변경하십시오.

Question

뒤에는 링크가있는 버튼과 해당 링크에 대한 애니메이션 밑줄이 있습니다. Code used from here, (example).

밑줄이 너무 크지 않고 텍스트 아래에 있는지 확인하기 위해 텍스트 자체에 애니메이션을 적용했습니다. 이 문제는 호버의 반경이 작아서 전체 버튼이 애니메이션을 트리거 할 수 있기를 바랍니다.

가 여기 내 CSS와 HTML입니다 :

.menuButtonText { 
 
    display: inline-block; 
 
    position: relative; 
 
    padding-bottom: 3px; 
 
} 
 
.menuButtonText:after { 
 
    content: ''; 
 
    display: block; 
 
    margin: auto; 
 
    height: 2px; 
 
    width: 0; 
 
    background: transparent; 
 
    transition: width .5s ease, background-color .5s ease; 
 
} 
 
.menuButtonText:hover:after { 
 
    width: 100%; 
 
    background: #E0E0E0; 
 
} 
 

 
.menuButton { 
 
    width: 200px; 
 
    height: 100px; 
 
    margin: 20px; 
 
    background-color: red; 
 
}

<div class="menuButton"><a class="menuButtonText">MenuButton</a> 
 
</div> 
 
<div class="menuButton"><a class="menuButtonText">MenuButton</a> 
 
</div> 
 
<div class="menuButton menuButtonSelected"><a class="menuButtonText">MenuButton</a> 
 
</div>

은 "menuButton"클래스는 내가 원하는 트리거되는 텍스트가 차지하는 공간보다 훨씬 더 큰 부모이며, 나는 다른 솔루션을 사용할 수없는 것처럼 보입니다. 나는 ": after"때문에 그 것을 가정합니다.

Answer 1

이게 뭐야?

http://jsfiddle.net/19mdzLdk/

내가이 CSS를 추가 : DIV 호버에서 지금

.menuButton:hover .menuButtonText:after { 
    width: 100%; 
    background: #E0E0E0; 
} 

를 텍스트가 강조.