针对多个div元素同时显示悬停提示及背景高亮的问题，本文详细介绍了两种解决方案。首先，通过优化jquery事件处理中的this关键字和find()方法，实现精确控制单个元素。其次，推荐使用纯css的:hover伪类，提供更简洁、高性能的实现方式，并修正了html结构中的嵌套错误，确保每个悬停提示独立响应。
在网页开发中，为多个相似元素添加独立的悬停提示（tooltip）和交互效果是常见的需求。然而，如果不正确地处理事件委托和元素选择，可能会导致所有元素同时响应悬停事件，而非单个元素。本文将探讨如何利用jQuery和纯CSS两种方法，实现多个DIV元素各自独立的悬停提示及背景高亮效果。
问题分析：多元素同时响应悬停事件
原始代码中，当鼠标悬停在任何一个.tooltip元素上时，jQuery事件处理函数会执行以下代码：
$(".tooltip-img").addClass("tooltip-img-img");
这里的关键问题在于$(“.tooltip-img”)是一个全局选择器，它会选中页面上所有具有tooltip-img类的元素。因此，无论鼠标悬停在哪一个.tooltip上，所有.tooltip-img的背景都会被高亮，这显然不是我们期望的效果。
要解决这个问题，我们需要确保事件处理只影响当前被悬停的特定元素及其子元素。
立即学习“前端免费学习笔记（深入）”；
方案一：使用jQuery精确控制悬停效果
通过jQuery，我们可以利用事件处理函数中的this关键字来引用触发事件的当前DOM元素，并结合find()方法来定位其内部的特定子元素。
核心思路
在mouseover和mouseleave事件处理函数中，this指向当前被悬停的.tooltip元素。将this包装成jQuery对象$(this)。使用$(this).find(“.tooltip-img”)来查找当前.tooltip元素内部的.tooltip-img子元素。对找到的特定子元素添加或移除样式类。
修正后的jQuery代码
$(document).ready(function() { // 当鼠标悬停在任何一个 .tooltip 元素上时 $(".tooltip").on('mouseover', function() { // 仅查找当前被悬停的 .tooltip 元素内部的 .tooltip-img 子元素，并添加高亮类 $(this).find(".tooltip-img").addClass("tooltip-img-img"); }); // 当鼠标离开任何一个 .tooltip 元素时 $(".tooltip").on('mouseleave', function() { // 仅查找当前被悬停的 .tooltip 元素内部的 .tooltip-img 子元素，并移除高亮类 $(this).find(".tooltip-img").removeClass("tooltip-img-img"); });});
HTML结构优化
值得注意的是，原始HTML结构中存在一个标签嵌套在
修正后的HTML结构如下：
方案二：推荐使用纯CSS实现悬停效果
对于简单的悬停样式变化，使用纯CSS :hover伪类通常是更优的选择。它具有更好的性能，代码更简洁，并且不需要依赖JavaScript。
核心思路
利用CSS的父子选择器，当父元素处于:hover状态时，为其特定的子元素应用样式。
修正后的CSS代码
我们只需要修改.tooltip-img-img类所代表的样式应用方式。将原来需要JS动态添加的样式，直接通过:hover伪类应用到.tooltip-img上。
.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; /* 高亮背景色 */}/* 以下是原始的 tooltip 样式，保持不变 */.tooltip { position: relative;}/* 悬停时显示提示文本 */.tooltip:hover .tooltiptext { display: block;}.tooltip:before,.tooltip:after { display: block; opacity: 0; pointer-events: none; position: absolute;}.tooltip
以上就是jQuery与纯CSS实现多元素独立悬停提示效果教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1591321.html
微信扫一扫 
支付宝扫一扫 
