jquery - 如何在当前页面之外的菜单链接上创建鼠标悬停效果？

Question

这是我目前正在处理的网站设计：mailodding。几天前我刚刚学习了jquery，需要一些帮助。

目前，我使用 jquery 在当前页面的菜单上具有填充左效果：

$(function(){
var pathname = (window.location.pathname.match(/[^\/]+$/)[0]);
$('#menu ul li a').each(function() {
if ($(this).attr('href') == pathname)
{
    $(this).addClass('currentlink');
}
});

这是'currentlink'类的css

 .currentlink {
margin-left: 30px;
}

对于鼠标悬停（悬停）的菜单链接，我有相同的填充左效果。

  $(document).ready(function() {
$('.menulink').hover(function() { 
$(this).animate({ opacity: 1, marginLeft: '30px' }, 300);
}, function() { 
$(this).animate({ opacity: 0.8, marginLeft: 0 }, 200);
  });  
  });

我的问题是，当您将鼠标悬停在您所在的当前链接上时，它会为链接提供双重填充（当前为 30 像素 + 鼠标悬停时为 30 像素），这是我不想要的。关于如何将当前链接保持在固定边距的任何想法？

Answer 1

You can use the .not() method or :not selector:

.not method :

$('#menu ul li a').not('.currentlink ').hover(function () {} );

or css selector :

  $('#menu ul li a:not(.currentlink)').hover(function() {});

Answer 2

You could try the following:

$(document).ready(function() {
    $('#menu li a[class!="currentlink"]').hover( function() {
        ...
    }, function() {
        ...
    });
});