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

【问题标题】：How to create a mouseover effect on menu links EXCEPT for the current page?如何在当前页面之外的菜单链接上创建鼠标悬停效果？
【发布时间】：2013-03-10 10:26:27
【问题描述】：

这是我目前正在进行的网站设计：mailodging。前几天刚学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);
  });  
  });

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

【问题讨论】：

标签： jquery css

【解决方案1】：

您可以使用.not() 方法或:not 选择器：

.not 方法：

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

或css选择器：

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

【讨论】：

我无法让它工作，但感谢您的贡献。 :)

【解决方案2】：

您可以尝试以下方法：

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

【讨论】：