高效实现多个DIV悬停提示：jQuery与纯CSS解决方案-html教程-PHP中文网

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

本文旨在解决在多个div元素上实现悬停提示时，背景高亮效果错误地应用于所有元素的问题。文章提供了两种解决方案：首先，利用jquery的`this`关键字和`find()`方法精确控制单个元素的样式；其次，推荐使用更高效、性能更好的纯css `:hover`选择器来达到相同效果。文中附带代码示例、html结构优化建议，并对比了两种方法的优劣，以指导开发者选择最佳实践。

问题分析：多DIV悬停提示的样式冲突

在网页开发中，当存在多个相似的交互元素（例如多个带有悬停提示的div）时，我们常常希望鼠标悬停在其中一个元素上时，只有该元素及其相关子元素发生样式变化，而不是影响到所有同类元素。原始代码中，jQuery事件处理函数内的选择器$(".tooltip-img")会选择页面上所有带有tooltip-img类的元素。这意味着无论鼠标悬停在哪一个.tooltip元素上，所有.tooltip-img元素的背景都会被高亮，导致了不期望的全局效果。

原始jQuery代码片段：

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

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

登录后复制

原始HTML结构示例：

<div class="div-style">
  <div class="tooltip text" data-title="tooltip">
    <button class="tooltip-img">
      <a href=""> 
        <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>
      </a>
    </button>
  </div>
</div>
<!-- 多个类似的 div-style 结构 -->

登录后复制

值得注意的是，原始HTML中<button>元素内嵌套<a>元素是不符合HTML规范的，因为两者都是可交互元素。在实际开发中应避免此类嵌套。

立即学习“前端免费学习笔记（深入）”；

解决方案一：使用jQuery精确控制悬停元素

为了解决全局高亮问题，我们需要在事件处理函数中，将样式修改操作限定在当前触发事件的元素及其后代元素上。这可以通过jQuery的this关键字和find()方法实现。

核心概念：this与find()

this关键字：在jQuery事件处理函数内部，this指向触发该事件的DOM元素。将其包装成jQuery对象$(this)，可以方便地使用jQuery提供的方法。
find()方法：$(selector).find(filter)方法用于在当前匹配元素集合的每个元素的后代中，查找符合filter选择器的元素。通过结合$(this)和find()，我们可以确保只对当前悬停元素内部的特定子元素进行操作。

代码实现

将原始jQuery代码中的全局选择器$(".tooltip-img")替换为$(this).find(".tooltip-img")。

$(document).ready(function() {
  // 鼠标悬停事件
  $(".tooltip").on('mouseover', function() {
    // 使用 $(this) 引用当前悬停的 .tooltip 元素
    // 然后使用 .find() 查找其内部的 .tooltip-img 元素
    $(this).find(".tooltip-img").addClass("tooltip-img-img");
  });

  // 鼠标离开事件
  $(".tooltip").on('mouseleave', function() {
    $(this).find(".tooltip-img").removeClass("tooltip-img-img");
  });
});

登录后复制

HTML结构修正

考虑到HTML语义化和有效性，建议移除<button>内嵌套的<a>标签，因为<a>在此处并未提供额外的导航功能，且这种嵌套是无效的。如果需要点击行为，应将事件绑定到<button>上。

存了个图

视频图片解析/字幕/剪辑，视频高清保存/图片源图提取

查看详情

<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样式，用于定义.tooltip-img的初始状态和.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 :hover实现

对于简单的悬停样式变化，纯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链接，或直接删除。

<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>

登录后复制

总结与最佳实践

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

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

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

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