Question

我计划在链接上应用自定义显示/隐藏效果，这样当用户在链接上悬停时，会在其位置显示不同的链接。我在javascript方面不太好，这就是我的尝试：

<div id="nav">
    <a href="#"><li id="a1">hover link 1</li></a>
    <a href="#"><li id="a2">show link 1</li></a>
    <a href="#"><li id="b1">hover link 2</li></a>
    <a href="#"><li id="b2">show link 2</li></a>
    <a href="#"><li id="c1">hover link 3</li></a>
    <a href="#"><li id="c2">show link 3</li></a>
</div>

javascript：

$("#nav a.li").hover(function () {
    (this.id.charAt(0)+"1").hide();
});

Here is the fiddle

Answer 1

您错过了$并且需要添加#因为id您还需要更改选择器，因为您没有使用类li的锚点

更改

(this.id.charAt(0)+"1").hide();

到

$('#' +this.id.charAt(0)+"1").hide();

您的代码将是

<强> Live Demo

$("#nav a li").hover(function () {
    $('#'+ this.id.charAt(0)+"1").hide();
});

修改如果您要删除正在悬停的项目，请使用$(this)

<强> Live Demo

$("#nav a li").hover(function () {
    $(this).hide();
});

自定义显示/隐藏链接

1 个答案: