0

请看这个小提琴

如果您将鼠标准确地悬停在链接上，则会出现一个不同的链接。但是，当您将鼠标悬停在链接的左侧或右侧时，也会出现不同的文本。我只想在将鼠标悬停在确切链接上时才制作悬停效果。

我怎样才能做到这一点？

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

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

4

4 回答 4

1

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

$("#nav li").on({
    "mouseenter" : function() { },
    "mouseleave" : function() { }
}, "a");
于 2013-04-10T01:03:33.693 回答
0

尝试以下操作：

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

您想在标签而不是s 本身上启动hover事件。ali

例子

于 2013-04-10T01:03:41.993 回答
0

我想我更新了小提琴。我刚刚添加了这种样式：

#nav li {
  display: inline-block;
}
于 2013-04-10T01:04:42.827 回答
0

在您的 js 中，将您的函数绑定到"#nav li a"。

于 2013-04-10T01:06:14.963 回答