悬停特定类的元素时如何调用js函数？答案

【问题标题】：How to call a js function when an element with a particular class is hovered?悬停特定类的元素时如何调用js函数？
【发布时间】：2016-05-04 07:15:08
【问题描述】：

我试图在特定类的元素悬停时调用一个函数。假设有 100 个 div，其中 50 个有类测试，所以我想要的是当我将鼠标悬停在带有类测试的 div 上时应该调用一个函数。

<div class="test" mouseover="myfunc()">
</div>
<div class="test" mouseover="myfunc()">
</div>
<div class="test" mouseover="myfunc()">
</div>
.
.
.
<script type="text/javascript">
function myfucn(){......}
</script>

但这变得太乏味了，所以我想要一个通用的方法，它针对所有测试类元素，而不需要一次又一次地编写鼠标悬停事件。我只喜欢 javascript（因为我正在学习它）但 jquery 没有问题。

【问题讨论】：

一个具体的工作示例会对您有所帮助！
如果你能展示你到目前为止尝试过的任何东西会很好。你还需要javascript解决方案还是jQuery也可以
确定我会编辑问题。
不是示例，而是您在尝试执行此操作时遇到的问题的模拟，如果显示您尝试过的内容会更好。

标签： javascript html

【解决方案1】：

如果您不只使用 Javascript 进行挖掘。尝试像这样使用 Jquery。

function doSomeThing(){
     //do something
}

$("div.test").hover(function(){
     doSomeThing();
});

如果你只想要 Javascript，试试这个：

function doSomeThing(){
    //do something
}

var el = document.getElementsByClassName("test");
for (i in el){
    el[i].addEventListener("mouseover", function(){
        //do something here

        //or call a function
        doSomeThing();
    });
}

更多信息

当你做document.getElementsByClassName("test");

您将获得Array。然后你必须给他们添加一个addEventListener("mouseover")，让他们知道他们什么时候被悬停。之后，你在它的函数中写一些你想做的事情。

【讨论】：

嘿，谢谢你的回答，但你能告诉我如何在 javascript 中做同样的事情吗？
@TubbyStubby 我在我的 Jquery 代码下添加了 Javascript
所以 for 循环正在检查该类的所有元素，无论它是否被悬停。谢谢你的回答。
@TubbyStubby for..loop 使用 for 给每个元素一个事件监听器。

【解决方案2】：

您可以：

获取所有元素（例如使用getElementsByClassName），然后将事件处理程序绑定到每个元素（使用addEventListener）或
将事件处理程序绑定到这些元素的祖先，然后，每次事件触发时，检查事件对象的target 属性（这是事件处理程序函数的第一个参数）以查看它是否是您关心的类的元素

【讨论】：

用getElementsByClassName获取所有元素后如何检查是否有人悬停。
@TubbyStubby — 遍历它们并添加 mouseover 和 mouseout 事件处理程序。

【解决方案3】：

此方法使用jQuery。

$('.myClass').hover(function () {
  // Do stuff here
});

【讨论】：

【解决方案4】：

您可以使用 jQuery 的悬停功能：https://api.jquery.com/hover/

例如：

 $( "td" ).hover(
  function() {
    $( this ).addClass( "hover" );
  }, function() {
    $( this ).removeClass( "hover" );
  }
);`

此示例在悬停时添加类悬停 - 并在悬停时删除类

【讨论】：

【解决方案5】：

$("test").hover(
    function(event) {
    // The mouse has entered the element
    },
    function (event) {
    // The mouse has left the element
    }
 );

如果你使用的是 JQuery，代码应该和上面类似

【讨论】：

【解决方案6】：

如果你想用 vanilla JS 而不是 jQuery 来做这件事，这里有一个基本的例子：

var elements = document.getElementsByClassName('YOUR_CLASS')
for (var i = 0; i < elements.length; i++) {
  elements[i].addEventListener('mouseover', function (event) {
    console.log('Element', event.target, 'is hovered')
  })
}

在这里，您基本上选择了所有具有“YOUR_CLASS”类的元素并将函数绑定到鼠标悬停事件。

【讨论】：