当前位置：首页 > JavaScript

js实现鼠标切换

2026-02-03 00:19:24JavaScript

鼠标切换的实现方法

鼠标切换通常指通过JavaScript实现鼠标悬停、点击等交互效果。以下是几种常见实现方式：

鼠标悬停效果切换

通过监听mouseenter和mouseleave事件实现悬停效果：

const element = document.getElementById('targetElement');
element.addEventListener('mouseenter', () => {
  element.style.backgroundColor = 'blue';
});
element.addEventListener('mouseleave', () => {
  element.style.backgroundColor = 'red';
});

点击切换样式

通过点击事件切换元素的类名或样式：

js实现鼠标切换

const button = document.getElementById('toggleButton');
button.addEventListener('click', () => {
  button.classList.toggle('active');
});

图片切换效果

实现鼠标悬停时图片切换：

const imgElement = document.getElementById('hoverImage');
const originalSrc = imgElement.src;
const hoverSrc = 'hover-image.jpg';

imgElement.addEventListener('mouseenter', () => {
  imgElement.src = hoverSrc;
});
imgElement.addEventListener('mouseleave', () => {
  imgElement.src = originalSrc;
});

使用CSS类切换

结合CSS和JavaScript实现更复杂的切换效果：

js实现鼠标切换

const box = document.querySelector('.switch-box');
box.addEventListener('click', function() {
  this.classList.toggle('flipped');
});

对应CSS：

.switch-box {
  transition: transform 0.6s;
}
.switch-box.flipped {
  transform: rotateY(180deg);
}

鼠标移入移出显示隐藏内容

实现鼠标悬停显示隐藏内容：

const container = document.querySelector('.hover-container');
const hiddenContent = document.querySelector('.hidden-content');

container.addEventListener('mouseenter', () => {
  hiddenContent.style.display = 'block';
});
container.addEventListener('mouseleave', () => {
  hiddenContent.style.display = 'none';
});

这些方法可以根据具体需求组合使用，实现各种鼠标交互效果。