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

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