Question

我们以前的开发人员，有些逻辑错误。

预期行为 - ＆gt;鼠标从当前导航中退出后，鼠标图标必须更改为正常图标。鼠标悬停后，鼠标悬停图标必须在下一个导航栏中添加。

HTML：

<ul data-desktop-menu>
    <li class="menu-item menu-item--category" data-ng-class="{'is-active':isActive()}" data-ng-mouseenter="showSubCategory()" data-ng-mouseleave="showCategory()" data-desktop-menu-item="protect">
        <a href="#"><img src="images/icons-hd/protect.png" oversrc="images/icons-hd/protect-over.png" alt=""/><span>Protect</span></a>

        <ul data-desktop-submenu="protect">
           <li class="menu-item menu-item--title">
              <a>Protect</a>
           </li>
          <li class="menu-item menu-item--subcategory">
              <a href="#"><span>Protect 1</span></a>
          </li>
          <li class="menu-item menu-item--subcategory">
             <a href="#"><span>Protect 2</span></a>
          </li>
        </ul>
     </li>
    <li class="menu-item menu-item--category" data-desktop-menu-item="grow">
        <a href="#"><img src="images/icons-hd/grow.png" oversrc="images/icons-hd/grow-over.png" alt=""/><span>Grow</span></a>
    </li>
    <li class="menu-item menu-item--category last" data-desktop-menu-item="assist">
        <a href="#"><img src="images/icons-hd/assist.png" oversrc="images/icons-hd/assist-over.png" alt=""/><span>Assist Me</span></a>
    </li>
</ul>

JS：

$('li.menu-item.menu-item--category').hover(function() {
    $(this).addClass('active');
    }, function() {
    $(this).removeClass('active');
});

由于

Answer 1

我认为您可以使用CSS

a:hover{background:url('image');background-size:(width,height);}

Answer 2

您可以使用以下代码。

$('li.menu-item.menu-item--category').hover(function() {
   var t=$(this).find('img');  
   var temp=t.attr('src');
   t.attr('src',t.attr('oversrc'));
   t.attr('oversrc',temp);
// $(this).addClass('active');
  }, function() {
 //$(this).removeClass('active');
   var t=$(this).find('img');  
   var temp=t.attr('src');
   t.attr('src',t.attr('oversrc'));
   t.attr('oversrc',temp);
});

演示链接：http://jsfiddle.net/asimshahiddIT/msx2vwaj/

鼠标悬停时，悬停图像必须更改

2 个答案: