文章内容

2022/12/21 17:59:00,作 者: 黄兵

div class 的 mouseover 和 mouseout 事件监听

假设 div 的 class 为 “company-name”,下面是 JavaScript 的 mouseovermouseout 事件监听代码示例:

const companyNameElements = document.querySelectorAll('.company-name');

companyNameElements.forEach(element => {
  element.addEventListener('mouseover', function() {
    // This function will be called when the mouse is hovering over the element
  });
  element.addEventListener('mouseout', function() {
    // This function will be called when the mouse is no longer hovering over the element
  });
});

这段代码将获得所有具有 "company-name "类的元素,并为每个元素添加 mouseovermouseout 事件监听器。当鼠标悬停在元素上时,鼠标悬停事件的函数将被调用。当鼠标不再悬停在该元素上时,mouseout 事件的函数将被调用。

然后,你可以为每个事件定义函数,以指定事件被触发时应该发生什么。

例如,你可以通过在 mouseover 事件函数中添加以下代码,在鼠标悬停在该元素上时,改变该元素的背景颜色。

element.style.backgroundColor = 'red';

而当鼠标不再悬停在该元素上时,你可以通过在 mouseout 事件函数中添加以下代码,将背景颜色变回原来的颜色。

element.style.backgroundColor = '';

上面只是一个简单的例子,我们可以用它们来触发你想要的任何动作,比如显示一个工具提示或改变元素的文本。

分享到:

发表评论

评论列表