自定义显示/隐藏链接

Custom show/hide links

本文关键字：链接 隐藏 显示 自定义      更新时间：2023-09-26

我计划在链接上应用一个自定义的显示/隐藏效果，这样当用户将鼠标悬停在一个链接上时，一个不同的链接就会出现在它的位置。我不太擅长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();
});

小提琴来了

您错过了$，需要在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();
});

Edit如果你想移除正在悬停的项目，那么使用$(this)

现场演示

$("#nav a li").hover(function () {
    $(this).hide();
});
相关文章：