悬停时调用元素（没有唯一 ID）的函数答案

【问题标题】：Call function on element (that does not have unique id) on hover悬停时调用元素（没有唯一 ID）的函数
【发布时间】：2018-09-10 06:26:53
【问题描述】：

当悬停在相同类型的通用元素上时，我想在这些元素上执行一个函数来执行动画。然而，由于这些元素没有唯一的 id，我不确定如何在 JavaScript 中唯一地标识它们。有没有办法为此使用 this 关键字？我不想给他们所有唯一的 id，因为大量相同的元素似乎是多余的。任何帮助将不胜感激。

这里有一些我正在玩的代码来尝试让它工作。最好是代码越简单或使用基本的javascript越好。

$(document).ready(function(){
  $("span").hover(function(){
    this.color = red;
  });
});

【问题讨论】：

您希望在悬停时发生什么？也许这只能用 CSS 来完成。
我不这么认为，我希望元素执行动画，但即使人停止悬停，我也希望动画继续。

标签： javascript jquery html css hover

【解决方案1】：

red 不是变量，它是一个字符串。所以你必须使用'red':

要使用 JavaScript 设置颜色，您必须使用 style 属性：

$(document).ready(function(){
  $("span").hover(function(){
    this.style.color = 'red';
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Frist</span> <br>
<span>Second</span>

或：使用 jQuery 使用 .css()

$(document).ready(function(){
  $("span").hover(function(){
    $(this).css({color: 'red'});
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Frist</span> <br>
<span>Second</span>

【讨论】：

【解决方案2】：

您可以将用户类作为选择器

为所有<span>元素赋予相同的类

尝试关注

    $('.hoverTest').hover(function(){
        $(this).css("color", "red");
        }, function(){
        $(this).css("color", "");
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class='hoverTest'>Your Span Element</span><br/>
<span class='hoverTest'>Span 1</span><br/>
<span class='hoverTest'>Span 2</span><br/>
<span class='hoverTest'>Span 3</span><br/>
<span class='hoverTest'>Span 3</span><br/>
<span class='hoverTest'>Span n</span>

更多详情请参考Jquery Hover()

【讨论】：