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");
            });

当我的父li悬停时，如何切换图像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");
});

示例： http://jsfiddle.net/n5RCV/

Answer 2

如果你愿意稍微重构一下你的html，用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>

在父李悬停上的Jquery图像翻转

2 个答案: