本教程探讨如何在用户悬停于一组元素中的某个特定元素时，为其同级非当前元素动态添加或移除css类。文章将详细介绍两种实现方法：一种是利用纯css的`:hover`和`:not(:hover)`伪类选择器，适用于简洁高效的场景；另一种是采用vanilla javascript结合`mouseenter`和`mouseleave`事件以及`classlist` api，提供更灵活的控制能力。通过对比两种方案，帮助开发者根据项目需求选择最合适的实现方式。
在Web开发中，我们经常需要实现复杂的交互效果，其中之一就是根据用户的鼠标悬停状态来动态改变元素的样式。本教程将深入探讨一个具体场景：当鼠标悬停在某个元素上时，为该元素所在容器内的其他（非当前悬停）元素添加或移除特定的CSS类。我们将提供两种实现方案：纯CSS方法和JavaScript方法，并分析它们的适用场景。
对于许多UI交互，CSS本身就提供了强大且高效的能力。在这种特定需求下，我们可以巧妙地结合使用CSS的伪类选择器来达成目标，而无需编写任何JavaScript代码。这种方法的优势在于其简洁性、声明性以及由浏览器原生处理带来的性能优势。
首先，我们需要一个包含多个子元素的父容器。这里，我们使用一个div作为wrapper，其中包含三个子div元素。
<div class="wrapper"> <div>1</div> <div>2</div> <div>3</div> </div>
核心在于利用:hover伪类作用于父容器，然后结合:not(:hover)伪类作用于子元素。当鼠标悬停在.wrapper上时，我们希望所有子div都应用一个基础样式，但排除当前鼠标悬停的那个div。
立即学习“Java免费学习笔记（深入）”；
.wrapper:hover div:not(:hover) {
background: red; /* 当鼠标悬停在父容器上，且子元素不是当前悬停元素时，应用红色背景 */
color: white; /* 可选：文字颜色 */
}
/* 基础样式，使div可见 */
.wrapper {
display: flex;
gap: 10px;
padding: 20px;
border: 1px solid #ccc;
}
.wrapper div {
width: 50px;
height: 50px;
background: #f0f0f0;
border: 1px solid #ddd;
display: flex;
justify-content: center;
align-items: center;
transition: background 0.3s ease; /* 添加过渡效果，使样式变化更平滑 */
}这种方法非常高效且易于理解，适用于样式变化相对简单，且不需要复杂逻辑判断的场景。
虽然CSS方法简洁高效，但在某些情况下，我们可能需要更复杂的逻辑控制，或者需要在悬停事件中触发其他JavaScript行为。这时，使用JavaScript来动态添加和移除类就成为必要。
HTML结构与CSS方案相同，我们仍然使用一个wrapper容器和多个子div元素。
<div class="wrapper"> <div>1</div> <div>2</div> <div>3</div> </div>
为了通过JavaScript控制样式，我们需要定义一个独立的CSS类，该类包含我们希望在悬停时应用的样式。
.red {
background: red;
color: white;
}
/* 基础样式，与CSS方案相同 */
.wrapper {
display: flex;
gap: 10px;
padding: 20px;
border: 1px solid #ccc;
}
.wrapper div {
width: 50px;
height: 50px;
background: #f0f0f0;
border: 1px solid #ddd;
display: flex;
justify-content: center;
align-items: center;
transition: background 0.3s ease; /* 添加过渡效果 */
}JavaScript方案涉及监听每个子元素的mouseenter和mouseleave事件，并在事件触发时动态操作元素的classList。
// 获取所有子div元素
const elDivs = document.querySelectorAll(".wrapper div");
/**
* 根据事件类型切换所有非当前悬停div的CSS类
* @param {Event} evt - 鼠标事件对象
*/
const toggleClassDivs = (evt) => {
// 判断事件类型是mouseenter还是mouseleave
const isEnter = evt.type === "mouseenter";
// 遍历所有子div元素
elDivs.forEach(el => {
// 如果是mouseenter事件，则添加'red'类；如果是mouseleave事件，则移除'red'类
// classList[isEnter ? "add" : "remove"]("red") 是一种简洁的写法
el.classList[isEnter ? "add" : "remove"]("red");
});
// 特殊处理：将当前悬停的元素（evt.currentTarget）的'red'类移除
// 确保悬停的元素本身不会变红
evt.currentTarget.classList.remove("red");
};
// 为每个子div元素添加mouseenter和mouseleave事件监听器
elDivs.forEach(el => {
el.addEventListener("mouseenter", toggleClassDivs);
el.addEventListener("mouseleave", toggleClassDivs);
});通过本教程，您应该能够根据实际需求，灵活选择并实现当鼠标悬停于一个元素时，为其同级非当前元素添加或移除样式的交互效果。
以上就是实现悬停时对非当前元素添加样式的教程：CSS与JavaScript方法的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
626
收藏
