我希望当对象悬停时,JS函数应该运行,但它会在页面加载时立即运行



我有一张services-box类的卡,我只想在卡悬停时运行我的函数。

这是我的JS代码:

var services_box = document.querySelectorAll('.services-box');
services_box.addEventListener("mouseover", hover_bx(), false);
function hover_bx() {
alert("asdasdasdasd")
}
<div class="services-box">
<div class="icon">
<img src="{% static 'main/images/videoproduction.png' %}" alt="design.png" class="img-fluid">
</div>
<div class="title">
<h5>Video Production</h5>
</div>
<div class="description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid ducimus quia sint impedit autem quis magnam, exercitationem consequatur dolorum accusamus consectetur quidem quod minima laudantium?
</div>
</div>

hover_bx()正在立即调用函数。

您只需要传递对函数(函数名称(的引用

(function () {
var services_box = document.querySelector('.services-box');
services_box.addEventListener("mouseover", hover_bx, false); 
function hover_bx () {
alert("asdasdasdasd")
}
})();
<div class="services-box">Hover me!</div>

最新更新