javascript - 自定义显示/隐藏链接

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

这是小提琴

Answer 1

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

改变

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

到

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

你的代码是

现场演示

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

编辑如果要删除悬停的项目，请使用$(this)

现场演示

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