호버를 통해 전체 div 변경하기

Question

이미지 호버가 제대로 작동하지만 마우스를 올려 놓으면 색상이 변경됩니다. 마찬가지로 div를 한 번 올리면 이미지가 바뀝니다.

이미지 자체에 마우스를 올려 놓고 싶지는 않으며 단지 변경됩니다.

HTML :

<div class="navigation-box">          
     <div class="sidehead"><i class="lock"></i>header 1</div>         
      <div class="navLinks"> 
       <ul class=""> 
        <li>1</li> 
        <li>2</li> 
        <li>3</li> 
       </ul> 
      </div>   
</div>  

CSS : 바이올린에서

.lock { 
    background: url('../images/lock.png') no-repeat center; 
    display: inline-block; 
    width: 30px; 
    height: 30px; 
    text-align: center; 
    vertical-align: middle; 
    margin-top:-5px; 
    margin-left:5%; 
} 

li:hover .lock{ 
    background: url("../images/lock-hover.png") no-repeat center;  
} 

Fiddle

, 당신은 내가 무슨 말 볼 수 있습니다. 단순히 sidehead으로 넘겨서 lock 이미지를 변경하기 만하면됩니다. 어떤 아이디어가 내가 잘못하고있는 것일까 요?

Answer 1

선택기가 약간 잘못되었습니다. 당신은 당신이 호버에게

.sidehead .lock { 
 
    background: url('http://uploadir.com/u/il2433z4') no-repeat center; 
 
    display: inline-block; 
 
    width: 30px; 
 
    height: 30px; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    margin-top:-5px; 
 
    margin-left:5%; 
 
} 
 
.sidehead:hover .lock { 
 
    background: grey url("http://uploadir.com/u/4js58y48") no-repeat center; 
 
} 
 
.sidehead { 
 
    border:1px solid green; /* for visual refernece */ 
 
}

<div class="navigation-box"> 
 
    <div class="sidehead"><i class="lock"></i>header 1</div> 
 
    <div class="navLinks"> 
 
     <ul class=""> 
 
      <li>1</li> 
 
      <li>2</li> 
 
      <li>3</li> 
 
     </ul> 
 
    </div> 
 
</div>

Answer 2

CSS can't select a parent 때문에 작동하지 않습니다. 귀하의 CSS는 목록 항목 위로 마우스를 가져 가면 자식 .lock이 처리합니다. jQuery를이 들어오는 곳이다 당신은 다음처럼 작성할 수 있습니다.

$('li').hover(function(){ 
    $('.lock').addClass('newClass'); 
}); 

CSS :

.newClass { 
    background: url("../images/lock-hover.png") no-repeat center; 
} 

이 예에 불과하고 목록의 외부 마우스를하지만해야 할 때 포함되지 않습니다 함께 움직이는 데 도움이됩니다.

Answer 3

을 넣어야 할 경우 당신은 자바 스크립트를 사용할 수는 .sidehead 사업부를 통해 마우스를 가져 가면 일이 뭔가를하려는 경우

. 그래서 당신은 호버로 작동하도록 mouseout 및 mouseover 이벤트를 사용할 수 있습니다

$(".navigation-box").mouseover(function(){ // White image 
    $(".lock").css("background"," url('http://uploadir.com/u/4js58y48') no-repeat center") 
}); 
$(".navigation-box").mouseout(function(){ // Black image 
    $(".lock").css("background"," url('http://uploadir.com/u/il2433z4') no-repeat center") 
}); 

Here is an example합니다. 참고 변경 사항이 분명하도록 본문의 배경색을 변경했습니다. 당신은

또는 작업을 수행 할 수 있습니다

.navigation-box:hover > .sidehead > .lock { 
    background: url("http://uploadir.com/u/4js58y48") no-repeat center; 
} 

For example

Answer 4

당신은 쉽게

$('li').on('mouseenter mouseleave', function(e) { 
    $('.lock').trigger(e.type); 
}); 

나는 당신의 리에게 클래스를 제공하기 위해 조언을 것입니다 (또는 UL) jQuery를

를 사용하여이 작업을 수행 할 수 있습니다

이 코드는 li이있을 때 모든 .lock 객체에 대한 호버 이벤트를 트리거합니다. (더 정확하게 보이기를 원한다면 ID와 클래스를 추가하십시오.)