jQuery 或纯CSS实现多DIV独立悬停提示效果_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

jQuery 或纯CSS实现多DIV独立悬停提示效果

2025-11-02

浏览次数：次

返回列表

jQuery 或纯CSS实现多DIV独立悬停提示效果

本教程旨在解决多个div元素悬停提示时，所有提示同时触发的问题。我们将深入探讨如何利用jquery的this和find()方法实现局部事件响应，以及更推荐的纯css方案来高效、独立地控制每个div的悬停效果，避免全局影响，并优化html结构。

在网页开发中，为多个相似元素添加交互效果（如悬停显示提示或改变样式）是一个常见的需求。然而，如果不正确地处理事件监听和元素选择，可能会导致所有元素同时响应，而非预期的独立行为。本教程将以一个具体的悬停提示（tooltip）场景为例，详细讲解如何通过jQuery和纯CSS两种方法，实现多个DIV元素的独立悬停效果。

理解问题：全局选择器的陷阱

最初的代码尝试使用jQuery为.tooltip类元素添加mouseover和mousele*e事件监听，并在事件触发时，为.tooltip-img元素添加或移除tooltip-img-img类。

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

  $(".tooltip").on('mousele*e', 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('mousele*e', function() {
    $(this).find(".tooltip-img").removeClass("tooltip-img-img");
  });
});

HTML结构注意事项：

OneStory

OneStory 是一款创新的AI故事生成助手，用AI快速生成连续性、一致性的角色和故事。

319 查看详情 OneStory

在提供的原始HTML中，存在一个语义上的问题：元素嵌套在

修正后的HTML结构示例：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div-style">
  <div class="tooltip text" data-title="tooltip">
    <button class="tooltip-img">
      <svg id="OpenDialog" width="20px" height="20px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path d="M16 2H7.979C6.88 2 6 2.88 6 3.98V12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 10H8V4h8v8zM4 10H2v6c0 1.1.9 2 2 2h6v-2H4v-6z"/>
      </svg>
    </button>
  </div>
</div>
<div class="div-style">
  <div class="tooltip text" data-title="tooltip">
    <button class="tooltip-img">
      <svg id="OpenDialog" width="20px" height="20px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path d="M16 2H7.979C6.88 2 6 2.88 6 3.98V12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 10H8V4h8v8zM4 10H2v6c0 1.1.9 2 2 2h6v-2H4v-6z"/>
      </svg>
    </button>
  </div>
</div>

解决方案二：推荐的纯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方法后，J*aScript代码将不再需要用于控制tooltip-img的背景高亮效果。如果还有其他更复杂的交互逻辑，才需要考虑引入J*aScript。

注意事项与最佳实践

HTML语义与嵌套：始终关注HTML元素的语义和嵌套规则。例如，标签和
性能考量：对于纯粹的视觉效果（如悬停改变背景色、显示/隐藏元素），CSS解决方案通常比J*aScript更高效。浏览器在处理CSS动画和过渡时通常会利用硬件加速，从而提供更流畅的用户体验。
代码简洁性与可维护性：纯CSS方案

以上就是jQuery 或纯CSS实现多DIV独立悬停提示效果的详细内容，更多请关注其它相关文章！

# 背景色 # 定海区网站建设价格 # 悟空互动seo教学视频 # 常州微信网站建设框架 # 移动网站建设的方案 # 浑南区品牌网站建设推广 # 帮忙推广网站微信群 # 章丘论坛推广招聘网站 # 煤机市场营销推广方案怎么写 # 去seo网络公司 # 麻城网站优化推广公司 # 并在 # 两种 # 在这个 # 都是 # 如何做 # css # 移除 # 是一个 # 多个 # 选择器 # css动 # cdn # 浏览器 # seo # svg # ajax # js # html # jquery # java # javascript

相关栏目：【科技资讯46185 】【网络学院92790 】

上一篇：CSS布局技巧：如何在子元素内部实现文本底部对齐

下一篇：CSS技巧：实现图片与多行文本的垂直居中对齐

首页

关于我们

产品展示

咨询研究

新闻中心

留言板

联系我们

新闻中心 NEWS CENTER

jQuery 或纯CSS实现多DIV独立悬停提示效果

理解问题：全局选择器的陷阱

解决方案一：使用jQuery的this和find()实现局部控制

解决方案二：推荐的纯CSS方法实现悬停效果

注意事项与最佳实践