链接上的自定义鼠标事件

如果将鼠标正好悬停在链接上，将出现不同的链接。但是，当您将鼠标悬停在链接的左侧或右侧时，也会显示不同的文字。我只想在确切链接上进行悬停效果时才使用悬停效果。

我该怎么做？

我HTML代码：

<ul id="nav"> 
    <li id="a1"><a href="#">original link 1</a></li> 
    <li id="a2" class="hack"><a href="#">hover link 1</a></li> 
    <li id="b1"><a href="#">original link 2</a></li> 
    <li id="b2" class="hack"><a href="#">hover link 2</a></li> 
    <li id="c1"><a href="#">original link 3</a></li> 
    <li id="c2" class="hack"><a href="#">hover link 3</a></li> 
</ul>

我Javascript代码：

$('.hack').hide(); 
$("#nav li").mouseenter(function() { 
    $('#' +this.id.charAt(0)+"2").show(); 
    $('#' +this.id.charAt(0)+"1").hide(); 
    }).mouseleave(function() { 
    $('#' +this.id.charAt(0)+"1").show(); 
    $('#' +this.id.charAt(0)+"2").hide(); 
    });

请参阅小提琴，看我指的效果。

来源

2013-04-10 xan

尝试以下操作：

$('.hack').hide(); 
$("#nav li a").mouseenter(function() { 
    $('#' +this.parentNode.id.charAt(0)+"2").show(); 
    $('#' +this.parentNode.id.charAt(0)+"1").hide(); 
    }).mouseleave(function() { 
    $('#' +this.parentNode.id.charAt(0)+"1").show(); 
    $('#' +this.parentNode.id.charAt(0)+"2").hide(); 
});

你想在a标签上启动hover事件而非li本身。

EXAMPLE

来源

2013-04-10 01:03:41 Chase

而不是使用MouseEnter事件的快捷方式，如果你使用事件代表团这样"a"元素添加事件会更好......

$("#nav li").on({ 
    "mouseenter" : function() { }, 
    "mouseleave" : function() { } 
}, "a");

来源

2013-04-10 01:03:33 Givi

我想我更新了小提琴。我只是说这种风格：

#nav li { 
    display: inline-block; 
}

来源

2013-04-10 01:04:42 macool

在你的JS，你的功能结合到"#nav li a"代替。

来源

2013-04-10 01:06:14 talles

链接上的自定义鼠标事件

回答

相关问题