鼠标悬停父元素内指定子元素触发元素移动，其他子元素不触发

针对你的需求——仅当鼠标悬停在父元素内的特定子元素上时，让指定元素产生移动效果，其他子元素悬停无反应——我结合你提供的HTML结构，给出两种可行方案：

方案一：纯CSS实现（推荐，简单高效） #

利用CSS的兄弟选择器和:hover伪类，我们可以精准控制触发条件。假设你希望悬停图片时，让<h3>元素产生移动效果，代码如下：

步骤1：添加CSS样式 #

/* 给目标元素（h3）设置过渡动画，保证移动平滑 */
.director-info h3 {
  transition: transform 0.3s ease-in-out;
}

/* 仅当悬停图片所在的列时，触发h3的移动 */
.director-info .col-md-5:hover + .col-md-7 h3 {
  transform: translateX(10px); /* 向右移动10px，可自定义方向和距离 */
}

如果需要更精准，只在悬停图片本身时触发（而非整个图片列），可以使用:has()选择器（现代浏览器均支持）：

.director-info h3 {
  transition: transform 0.3s ease-in-out;
}

/* 仅悬停图片时，触发h3移动 */
.director-info .col-md-5:has(.profile-img:hover) + .col-md-7 h3 {
  transform: translateY(-5px); /* 向上移动5px */
}

原理说明 #

• + 是相邻兄弟选择器，仅选择紧跟在.col-md-5后的.col-md-7元素
• :has() 是父选择器，判断.col-md-5内的.profile-img是否处于悬停状态
• 过渡动画transition让移动效果更自然，避免生硬跳转

方案二：JavaScript实现（兼容旧浏览器或复杂场景） #

如果需要兼容不支持:has()的旧浏览器，或者需要更复杂的移动逻辑，可以用JS实现：

步骤1：添加JavaScript代码 #

// 获取触发元素（图片）和目标元素（h3）
const profileImg = document.querySelector('.profile-img');
const targetH3 = document.querySelector('.director-info h3');

// 鼠标进入图片时，触发移动
profileImg.addEventListener('mouseenter', () => {
  targetH3.style.transform = 'translateX(10px)';
  targetH3.style.transition = 'transform 0.3s ease-in-out';
});

// 鼠标离开图片时，恢复原位
profileImg.addEventListener('mouseleave', () => {
  targetH3.style.transform = '';
});

原理说明 #

• 通过监听图片的mouseenter和mouseleave事件，精准控制目标元素的样式变化
• 手动添加过渡属性，保证移动效果平滑

自定义调整建议 #

• 你可以修改transform的值来改变移动方向和距离，比如translateY(5px)（向下）、scale(1.1)（缩放，可选）
• 如果目标元素不是<h3>，只需把选择器换成你需要的元素即可（比如.profile-img本身，实现图片悬停自移动）
• 过渡时间0.3s可以根据需求调整，数值越大动画越慢

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