时间戳

首页 > 解决方案 > 我希望当对象悬停时，应该运行一个 JS 函数，但它会在页面加载时立即运行

javascript - 我希望当对象悬停时，应该运行一个 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>

标签： javascripthtml

解决方案

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>

推荐阅读