부모 이미지 위로 Jquery 이미지 롤오버

Question

이전에 jQuery를 사용하여 롤오버 이미지를 스왑하는 반응 형 이미지 기반 탐색 메뉴가 있습니다.

<ul id="mainmenu"> 
    <li><a href="#"><img src="nav1-off.png" class="rollover"/></a> 
     <div class="mega-menu"><p>Mega menu content in here</p></div> 
    </li> 
    <li><a href="#"><img src="nav2-off.png" class="rollover"/></a> 
     <div class="mega-menu"><p>Mega menu content in here</p></div> 
    </li> 
</ul> 

$("img.rollover").hover(
      function() { this.src = this.src.replace("-off", "-on"); 
      }, 
      function() { this.src = this.src.replace("-on", "-off"); 
      }); 

부모 리가 위에있을 때 어떻게 이미지 src를 토글해야합니까?

기본적으로 새로 추가 된 메가 메뉴 div가 마우스 오버 한 이미지 위로 마우스를 올리면 여전히 메뉴에 표시됩니다. 시도이 있지만 운 -

가

$("img.rollover").parent().hover(
    function() { 
    $("img.rollover",this).src = $("img.rollover",this).attr("src").replace("-off", "-on"); 
    }, 
    function() { 
    $("img.rollover",this).src = $("img.rollover",this).attr("src").replace("-on", "-off"); 
    }); 

Answer 1

$("#mainmenu").on("mouseenter", "li", function(){ 
    var rollover = $(this).find(".rollover")[0]; 
    rollover.src = rollover.src.replace("-off", "-on"); 
}).on("mouseleave", "li", function(){ 
    var rollover = $(this).find(".rollover")[0]; 
    rollover.src = rollover.src.replace("-on", "-off"); 
}); 

예 : 당신이 당신의 HTML 조금 리팩토링하고자하는 경우http://jsfiddle.net/n5RCV/

Answer 2

,이 문제는 아마 더 나은 CSS로 처리 할 것입니다. 당신은 더 나은 성능을 얻을 것이고 (틀림없이) 이미지의 유지 보수가 더 쉬울 것입니다. 다음은 CSS 사용법에 대한 모형입니다. 방금 그걸 다듬 었으니 까. 조금 더 세분화해야 할거야.

<ul id="mainmenu"> 
    <li id="nav1" ><span class="nav-img"></span> 
     <div class="mega-menu"><p>Mega menu content in here</p></div> 
    </li> 
    <li id="nav2" ><span class="nav-img"></span> 
     <div class="mega-menu"><p>Mega menu content in here</p></div> 
    </li> 

</ul> 

<style> 

    /* default settings for all nav image spans */ 
    #mainmenu > li > .nav-img { 
     display: inline-block; 
     background-image: url("nav-default.png") no-repeat; 

     /* can override dimensions in #nav specific tags */ 
     width: 50px; 
     height: 50px; 


    } 

    #nav1 > .nav-img{ background-image: url("nav1-off.png") no-repeat; width:100px; height: 100px } 
    #nav1:hover > .nav-img{ background-image: url("nav1-on.png") no-repeat; } 

    #nav2 > .nav-img{ background-image: url("nav2-off.png") no-repeat; } 
    #nav2:hover > .nav-img{ background-image: url("nav2-on.png") no-repeat; } 


</style>