jQuery多元素悬停提示教程详解

修正后的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="这是第一个提示">
    <button class="tooltip-img">
      <svg id="OpenDialog1" 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="这是第二个提示">
    <button class="tooltip-img">
      <svg id="OpenDialog2" 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 :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

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~