如何用jQuery实现多Div单元素Hover Tooltip与背景高亮效果？

你的问题出在JavaScript代码中——当鼠标悬停时，你选中了所有.tooltip-img元素添加高亮类，导致所有Div的按钮都被高亮。要实现仅高亮当前悬停的元素，只需通过$(this)定位到当前触发事件的.tooltip容器，再找到它内部的.tooltip-img元素进行操作即可。

修改后的JavaScript代码 #

$(document).ready(function() {
  $(".tooltip").on('mouseover', function() {
    // 仅操作当前悬停的.tooltip下的.tooltip-img
    $(this).find(".tooltip-img").addClass("tooltip-img-img")
  });

  $(".tooltip").on('mouseleave', function() {
    // 移除当前元素下的高亮类
    $(this).find(".tooltip-img").removeClass("tooltip-img-img")
  });
});

额外优化：用CSS替代JS实现高亮（可选） #

其实你完全可以不用JavaScript，直接通过CSS的:hover伪类实现仅当前元素高亮，这样代码更简洁，还避免了JS事件绑定的开销：

.tooltip:hover .tooltip-img {
  width: 25px !important;
  height: 25px !important;
  border-radius: 15px;
  background: #0f0 !important;
}

使用这个CSS规则后，你可以直接删除原来的JavaScript代码，效果完全一致。

完整代码示例 #

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">
      <a href=""> 
        <svg 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 class="div-style">
  <div class="tooltip text" data-title="tooltip">
    <button class="tooltip-img">
      <a href=""> 
        <svg 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>

CSS（使用CSS hover优化版本） #

.tooltip-img {
  float: right;
  position: relative;
  top: 83px;
  left: 214px;
  background: transparent;
  border: none;
  width: 25px;
  height: 25px;
}

/* 用hover伪类替代JS实现高亮 */
.tooltip:hover .tooltip-img {
  width: 25px !important;
  height: 25px !important;
  border-radius: 15px;
  background: #0f0 !important;
}

.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;
}

内容的提问来源于stack exchange，提问作者Advi