hover에 관해서 문의 드립니다ㅠㅠ

Question

 

 

 

 

 

이런 화면이 있을 때 글씨 사이에 있는 흰 부분에  hover했을시에 

 

이런 식으로 hover한 부분에만 글씨가 뜨고 나머지 제외한 부분은 다 없애고 싶은데요...

이렇게 하려면 첫번째 사진의 검정색 글씨에는 hover효과가 없으면서도 하얀색 부분에 hover를 했을 때 어떻게 사라져야하는지 모르겠습니다..ㅠㅠ​​

 

 

 

 

 

 

 

 

 

 

 

Answer 1

CSS 만으로는 어렵겠습니다.

selector:hover + selector 선택자 패턴으로 hover된 다음 형제 요소를 처리하는 것은 가능하지만 이전 형제 요소를 선택하는 방법은 없습니다.

따라서 jQuery 기반이라면 아래와 같은 방법으로 코드를 작성하면 되지 않을까 합니다. jQuery를 조금 안다면 코드는 어렵지 않으니 충분히 이해하실 것입니다.

<p><span>aaaaaaaaaaaa</span><span>aaaaaaaaa</span><span>aaaaaaaa</span></p>

span {
   position: relative;
   transition: 0.5s;
}
span:nth-child(2) {
   color: #FFF;
}

 

$(function() {
    $("span").mouseover(function() {
      if ($(this).index() == 1) {
        $(this).css("color", "#000").prev().css("color", "#FFF").end().next().css("color", "#FFF");
      } 
   }).mouseout(function() {
      if ($(this).index() == 1) {
        $(this).css("color", "#FFF").prev().css("color", "#000").end().next().css("color", "#000");
      }   	
   });
});