本教程旨在解决多个div元素悬停提示时，所有提示同时触发的问题。我们将深入探讨如何利用jquery的this和find()方法实现局部事件响应，以及更推荐的纯css方案来高效、独立地控制每个div的悬停效果，避免全局影响，并优化html结构。
在网页开发中，为多个相似元素添加交互效果（如悬停显示提示或改变样式）是一个常见的需求。然而，如果不正确地处理事件监听和元素选择，可能会导致所有元素同时响应，而非预期的独立行为。本教程将以一个具体的悬停提示（tooltip）场景为例，详细讲解如何通过jQuery和纯CSS两种方法，实现多个DIV元素的独立悬停效果。
理解问题：全局选择器的陷阱
最初的代码尝试使用jQuery为.tooltip类元素添加mouseover和mouseleave事件监听，并在事件触发时，为.tooltip-img元素添加或移除tooltip-img-img类。
$(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”)是一个全局选择器。无论哪个.tooltip元素触发了mouseover事件，该选择器都会选中页面上所有拥有tooltip-img类的元素，并为它们添加tooltip-img-img类，从而导致所有DIV的背景同时高亮。为了实现独立效果，我们需要确保事件只影响当前被悬停的元素及其子元素。
解决方案一：使用jQuery的this和find()实现局部控制
要解决全局影响的问题，关键在于在事件处理函数内部，将操作限定在当前触发事件的元素及其后代元素上。jQuery提供了this关键字和find()方法来实现这一点。
立即学习“前端免费学习笔记（深入）”；
this关键字：在jQuery事件处理函数中，this指向触发事件的原始DOM元素。将其包装成jQuery对象$(this)，就可以使用jQuery的方法。find()方法：find()方法用于查找当前jQuery对象匹配的后代元素。
通过结合使用$(this).find(“.tooltip-img”)，我们能够精准地定位到当前被悬停的.tooltip元素内部的.tooltip-img子元素，从而实现局部样式修改。
修正后的jQuery代码：
$(document).ready(function() { $(".tooltip").on('mouseover', function() { // 使用 $(this) 定位当前被悬停的 .tooltip 元素 // 使用 .find(".tooltip-img") 查找其内部的 .tooltip-img 元素 $(this).find(".tooltip-img").addClass("tooltip-img-img"); }); $(".tooltip").on('mouseleave', function() { $(this).find(".tooltip-img").removeClass("tooltip-img-img"); });});
HTML结构注意事项：
在提供的原始HTML中，存在一个语义上的问题：元素嵌套在
修正后的HTML结构示例：
解决方案二：推荐的纯CSS方法实现悬停效果
对于简单的悬停样式改变，纯CSS方法通常是更优的选择。它具有更好的性能、更简洁的代码和更广泛的浏览器支持。通过利用CSS的伪类选择器:hover，我们可以直接在CSS中定义元素悬停时的样式。
在这个场景中，我们希望当.tooltip元素被悬停时，其内部的.tooltip-img元素改变背景色。这可以通过一个简单的CSS规则实现。
修正后的CSS代码：
/* 基础样式 */.tooltip-img { float: right; position: relative; top: 83px; left: 214px; background: transparent; border: none; width: 25px; height: 25px;}/* 当 .tooltip 被悬停时，其内部的 .tooltip-img 应用以下样式 */.tooltip:hover .tooltip-img { width: 25px !important; height: 25px !important; border-radius: 15px; background: #0f0 !important; /* 悬停时背景色变为绿色 */}/* 以下是其他与悬停提示相关的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代码将不再需要用于控制tooltip-img的背景高亮效果。如果还有其他更复杂的交互逻辑，才需要考虑引入JavaScript。
注意事项与最佳实践
HTML语义与嵌套：始终关注HTML元素的语义和嵌套规则。例如，标签和性能考量：对于纯粹的视觉效果（如悬停改变背景色、显示/隐藏元素），CSS解决方案通常比JavaScript更高效。浏览器在处理CSS动画和过渡时通常会利用硬件加速，从而提供更流畅的用户体验。代码简洁性与可维护性：纯CSS方案
以上就是jQuery 或纯CSS实现多DIV独立悬停提示效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1591115.html
微信扫一扫 
支付宝扫一扫 
