文章内容
2022/12/21 17:59:00,作 者: 黄兵
div class 的 mouseover 和 mouseout 事件监听
假设 div 的 class 为 “company-name”,下面是 JavaScript 的 mouseover 和 mouseout 事件监听代码示例:
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 "类的元素,并为每个元素添加 mouseover 和 mouseout 事件监听器。当鼠标悬停在元素上时,鼠标悬停事件的函数将被调用。当鼠标不再悬停在该元素上时,mouseout 事件的函数将被调用。
然后,你可以为每个事件定义函数,以指定事件被触发时应该发生什么。
例如,你可以通过在 mouseover 事件函数中添加以下代码,在鼠标悬停在该元素上时,改变该元素的背景颜色。
element.style.backgroundColor = 'red';
而当鼠标不再悬停在该元素上时,你可以通过在 mouseout 事件函数中添加以下代码,将背景颜色变回原来的颜色。
element.style.backgroundColor = '';
上面只是一个简单的例子,我们可以用它们来触发你想要的任何动作,比如显示一个工具提示或改变元素的文本。
评论列表