当前位置：首页 > JavaScript

js实现鼠标悬浮背景色

2026-04-05 02:32:17JavaScript

实现鼠标悬浮背景色效果

使用JavaScript实现鼠标悬浮时改变元素背景色，可以通过事件监听和DOM操作完成。以下是几种常见方法：

方法1：直接修改元素的style属性

const element = document.getElementById('targetElement');
element.addEventListener('mouseover', function() {
  this.style.backgroundColor = '#f0f0f0';
});
element.addEventListener('mouseout', function() {
  this.style.backgroundColor = '';
});

方法2：通过CSS类切换实现

CSS部分：

.hover-bg {
  background-color: #f0f0f0;
  transition: background-color 0.3s ease;
}

JavaScript部分：

const element = document.getElementById('targetElement');
element.addEventListener('mouseover', function() {
  this.classList.add('hover-bg');
});
element.addEventListener('mouseout', function() {
  this.classList.remove('hover-bg');
});

方法3：适用于多个元素的委托事件

当需要为多个元素添加相同效果时，使用事件委托更高效：

document.addEventListener('mouseover', function(e) {
  if (e.target.matches('.hoverable')) {
    e.target.style.backgroundColor = '#f0f0f0';
  }
});
document.addEventListener('mouseout', function(e) {
  if (e.target.matches('.hoverable')) {
    e.target.style.backgroundColor = '';
  }
});

方法4：使用现代JavaScript语法（ES6+）

箭头函数和模板字符串版本：

const setHoverEffect = (selector, color = '#f0f0f0') => {
  document.querySelectorAll(selector).forEach(el => {
    el.addEventListener('mouseenter', () => el.style.backgroundColor = color);
    el.addEventListener('mouseleave', () => el.style.backgroundColor = '');
  });
};
setHoverEffect('.hover-item');

注意事项

js实现鼠标悬浮背景色