如何用jQuery切换属性？悬停div时切换两张图片的实现咨询

当然可以实现啦！而且你想到的用布尔标记来控制切换的思路完全正确，完美匹配你要的「每次悬停div才触发切换，鼠标离开时不做任何操作」的需求。

核心思路 #

我们可以维护一个布尔变量（比如isShowingFirstImage）来记录当前显示的是哪张图片：

• 初始状态设为true，表示默认显示第一张图
• 每次用户悬停div时，就翻转这个布尔值，然后根据新的状态切换对应的图片

完整代码示例 #

HTML 结构

<!-- 包裹图片的div，用来监听悬停事件 -->
<div class="image-toggle-container">
  <img src="image1.jpg" alt="第一张图" class="toggle-image active">
  <img src="image2.jpg" alt="第二张图" class="toggle-image">
</div>

CSS 样式

.image-toggle-container {
  width: 400px;
  height: 300px;
  position: relative;
  cursor: pointer; /* 提示用户这个区域可交互 */
}

.toggle-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，填满容器 */
  display: none; /* 默认隐藏所有图片 */
}

/* 只有带active类的图片才会显示 */
.toggle-image.active {
  display: block;
}

JavaScript 逻辑

// 获取容器和图片元素
const toggleContainer = document.querySelector('.image-toggle-container');
const images = document.querySelectorAll('.toggle-image');

// 布尔标记：记录当前是否显示第一张图
let isShowingFirstImage = true;

// 监听鼠标进入容器的事件（mouseenter只会在首次进入时触发一次，不会重复触发）
toggleContainer.addEventListener('mouseenter', () => {
  // 翻转布尔标记的状态
  isShowingFirstImage = !isShowingFirstImage;
  
  // 根据新状态切换图片的active类
  images[0].classList.toggle('active', isShowingFirstImage);
  images[1].classList.toggle('active', !isShowingFirstImage);
});

关键细节说明 #

• 这里用mouseenter而非mouseover事件：mouseover会在鼠标移动到子元素（比如图片）上时重复触发，而mouseenter只会在鼠标首次进入容器时触发一次，更符合我们“每次悬停触发一次切换”的需求
• 布尔标记的翻转逻辑非常直观，每次悬停就切换状态，完全不需要关心鼠标离开的动作
• 如果觉得维护两张图片的类有点麻烦，也可以直接切换图片的src属性，本质逻辑是一样的，比如：

const toggleContainer = document.querySelector('.image-toggle-container');
const img = document.querySelector('.toggle-image');
const imageSources = ['image1.jpg', 'image2.jpg'];
let currentIndex = 0; // 用索引代替布尔标记，0对应第一张，1对应第二张

toggleContainer.addEventListener('mouseenter', () => {
  currentIndex = currentIndex === 0 ? 1 : 0;
  img.src = imageSources[currentIndex];
});

这种用状态标记（布尔或索引）来控制切换的方式非常简洁高效，完全符合你的需求，是正确的实现方式哦！

内容的提问来源于stack exchange，提问作者Menahem Gil