高效实现多个DIV悬停提示：jQuery与纯CSS解决方案

$(document).ready(function() {  $(".tooltip").on('mouseover', function() {    $(".tooltip-img").addClass("tooltip-img-img") // 问题所在：全局选择  });  $(".tooltip").on('mouseleave', function() {    $(".tooltip-img").removeClass("tooltip-img-img") // 问题所在：全局选择  });});

.tooltip-img {  float: right;  position: relative;  top: 83px;  left: 214px;  background: transparent;  border: none;  width: 25px;  height: 25px;}.tooltip-img-img {  width: 25px !important;  height: 25px !important;  border-radius: 15px;  background: #0f0 !important;}/* 其他 tooltip 相关的 CSS 保持不变 */.tooltip {  position: relative;}.tooltip:hover .tooltiptext {  display: block;}.tooltip:before,.tooltip:after {  display: block;  opacity: 0;  pointer-events: none;  position: absolute;}.tooltip:after {  height: 0;  top: 20px;  left: 100px;  width: 0;}.tooltip:before {  padding: 4px 8px;  width: 106px;  height: 22px;  background: red;  font-size: 14px;  color: #ffffff;  content: attr(data-title);  top: 75px;  white-space: nowrap;  left: 90px;  text-align: center;}.tooltip.text:after,.tooltip.text:before {  transform: translate3d(0, -10px, 0);  transition: all 0.15s ease-in-out;}.tooltip.text:hover:after,.tooltip.text:hover:before {  opacity: 1;  transform: translate3d(0, 0, 0);}.div-style {  border: 1px solid red;  width: 250px;  height: 120px;  display: flex;  float: left;  margin-left: 50px;}

对于简单的悬停样式变化，纯CSS通常是更优的选择。它具有更好的性能、更广泛的浏览器支持，并且代码更加简洁易懂，无需JavaScript即可实现。

核心概念：CSS :hover伪类与后代选择器

CSS的:hover伪类可以应用于任何元素，当鼠标指针悬停在该元素上时，其定义的样式就会生效。结合后代选择器，我们可以轻松地实现当父元素（例如.tooltip）被悬停时，其特定子元素（例如.tooltip-img）的样式变化。

代码实现

通过修改CSS，将原本由JavaScript添加的.tooltip-img-img类的样式直接定义在.tooltip:hover .tooltip-img选择器下。这样，当鼠标悬停在.tooltip元素上时，其内部的.tooltip-img元素就会自动应用这些样式。

.tooltip-img {  float: right;  position: relative;  top: 83px;  left: 214px;  background: transparent;  border: none;  width: 25px;  height: 25px;}/* 移除 .tooltip-img-img 类定义，将其合并到 :hover 规则中 *//* .tooltip-img-img { ... } *//* 当 .tooltip 元素被悬停时，其内部的 .tooltip-img 元素应用以下样式 */.tooltip:hover .tooltip-img {  width: 25px !important;  height: 25px !important;  border-radius: 15px;  background: #0f0 !important;}/* 其他 tooltip 相关的 CSS 保持不变 */.tooltip {  position: relative;}.tooltip:hover .tooltiptext {  display: block;}.tooltip:before,.tooltip:after {  display: block;  opacity: 0;  pointer-events: none;  position: absolute;}.tooltip:after {  height: 0;  top: 20px;  left: 100px;  width: 0;}.tooltip:before {  padding: 4px 8px;  width: 106px;  height: 22px;  background: red;  font-size: 14px;  color: #ffffff;  content: attr(data-title);  top: 75px;  white-space: nowrap;  left: 90px;  text-align: center;}.tooltip.text:after,.tooltip.text:before {  transform: translate3d(0, -10px, 0);  transition: all 0.15s ease-in-out;}.tooltip.text:hover:after,.tooltip.text:hover:before {  opacity: 1;  transform: translate3d(0, 0, 0);}.div-style {  border: 1px solid red;  width: 250px;  height: 120px;  display: flex;  float: left;  margin-left: 50px;}

HTML结构

HTML结构与jQuery方案中的修正版本保持一致，无需JavaScript文件，但为了保持完整性，可以保留jQuery CDN链接，或直接删除。

总结与最佳实践

本文提供了两种解决多DIV悬停提示样式冲突的方法：

jQuery方案：通过$(this).find()精确选择当前悬停元素的子元素进行样式修改。这种方法适用于需要复杂逻辑判断或动态数据交互的场景。纯CSS :hover方案：利用CSS的:hover伪类和后代选择器直接在样式表中定义悬停效果。这是更推荐的方法，因为它：性能更优：浏览器在渲染CSS时效率更高，无需JavaScript引擎介入。代码简洁：减少了JavaScript代码量，使维护更加容易。兼容性好：:hover是标准的CSS特性，在所有现代浏览器中都得到良好支持。

最佳实践建议：对于简单的UI状态变化（如悬停时的背景、边框、文本颜色等），应优先考虑使用纯CSS实现。只有当交互逻辑涉及更复杂的条件判断、动画控制或与后端数据交互时，才考虑引入JavaScript（如jQuery）。此外，始终注意编写语义化和有效的HTML结构，避免嵌套无效元素，以确保网页的可访问性和兼容性。

以上就是高效实现多个DIV悬停提示：jQuery与纯CSS解决方案的详细内容，更多请关注创想鸟其它相关文章！