Question

如果将鼠标完全悬停在链接上，则会显示不同的链接。但是，当您将鼠标悬停在链接的左侧或右侧时，也会出现不同的文本。我想只在悬停在确切链接上时才能产生悬停效果。

我该怎么做？

我的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();
  });

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

Answer 1

如果您使用事件委派并在"a"元素上添加事件，而不是使用mouseenter事件快捷方式，那么会更好...

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

Answer 2

尝试以下方法：

$('.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();
});

您希望在hover代码上发起a个活动，而不是li自己。{/ p>

EXAMPLE

Answer 3

我想我更新了小提琴。我刚添加了这种风格：

#nav li {
  display: inline-block;
}

Answer 4

在你的js中，将你的功能绑定到"#nav li a"。

链接上的自定义鼠标事件

4 个答案: