0

我有一个基于响应式图像的导航菜单，我之前使用 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 上时，如何切换图像 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");
    });
4

2 回答 2

0 
$("#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/

于 2013-05-18T11:54:52.183 回答
0

如果你愿意稍微重构你的 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>
于 2013-05-18T12:02:16.627 回答