鼠标悬停时选择单个链接

Question

我试图使我网站上的超链接具有一定的css动画效果。

我的代码：

$("a").mouseenter(function() {
this.addClass("myeffect");
}

到目前为止，它运行良好，但是当我悬停链接时，网站上的每个链接都会开始显示效果，而不仅仅是我鼠标悬停的链接。 如何仅显示悬停的链接显示效果？

Answer 1

您引用this不正确。

$("a").mouseenter(function() {
$(this).addClass("myeffect");
}

Answer 2

简单的this返回当前元素/节点。并且没有可用的addClass方法。

您需要从节点中选择该元素并向其添加class。

$(this)将选择该特定元素

$("a").mouseenter(function() {

$(this).addClass("myeffect");
})

.myeffect{
color : red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>