javascript - 多个 div 悬停相同的功能

Question

这里我有六个不同的 div 悬停蓝色 div 应该出现，默认情况下隐藏。我已经为此编写了代码，但它仅适用于第一个 div 我将所有 div 合并到一个变量中。任何人都可以向我建议我在这里缺少什么

var tcpTooltip = $('.tp-cont-tech, tp-cont-b, tp-cont-m, tp-cont-t, tp-cont-i, tp-cont-e');
var tcpTooltipDiv = $('.tpc-tooltip-tech, tpc-tooltip-b, tpc-tooltip-m, tpc-tooltip-t, tpc-tooltip-i, tpc-tooltip-e');
tcpTooltipDiv.hide();
$(tcpTooltip).each(function() {
  $(tcpTooltip).hover(function() {
    $(tcpTooltipDiv).show();
  }, function() {
    $(tcpTooltipDiv).hide();
  });
});

/* Tooltip */

.tp-cont-tech,
.tp-cont-e,
.tp-cont-t,
.tp-cont-m,
.tp-cont-i,
.tp-cont-b {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: red;
  margin-bottom: 20px;
}

.tpc-tooltip-tech,
.tpc-tooltip-e,
.tpc-tooltip-t,
.tpc-tooltip-m,
.tpc-tooltip-i,
.tpc-tooltip-b {
  position: absolute;
  top: 2%;
  left: 5%;
  z-index: 10;
  width: 100px;
  height: 100px;
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="tpc-info">
  <div class="tp-cont-tech">
    <div class="tpc-tooltip-tech"></div>
  </div>
  <div class="tp-cont-b">
    <div class="tpc-tooltip-b"></div>
  </div>
  <div class="tp-cont-m">
    <div class="tpc-tooltip-m"></div>
  </div>
  <div class="tp-cont-t">
    <div class="tpc-tooltip-t"></div>
  </div>
  <div class="tp-cont-e">
    <div class="tpc-tooltip-e"></div>
  </div>
</div>

Answer 1

如前所述，我将使用纯 CSS 和 :hover 伪。
如果您出于某种原因真的需要 jQuery，这将是您代码的重制。

基本上(除了向您的元素添加公共(public)类 [参见下面的代码])您需要当前悬停元素的 $(this) 引用:

var $tpCont = $('.tp-cont');
var $tcpTooltip = $('.tcp-tooltip');

$tcpTooltip.hide();

$tpCont.hover(function() {
  $(this).find($tcpTooltip).toggle();
});

.tp-cont {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: red;
  margin-bottom: 20px;
}

.tcp-tooltip {
  position: absolute;
  top: 2%;
  left: 5%;
  z-index: 10;
  width: 100px;
  height: 100px;
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="tpc-info">
  <div class="tp-cont tp-cont-tech">
    <div class="tcp-tooltip tpc-tooltip-tech"></div>
  </div>
  <div class="tp-cont tp-cont-b">
    <div class="tcp-tooltip tpc-tooltip-b"></div>
  </div>
  <div class="tp-cont tp-cont-m">
    <div class="tcp-tooltip tpc-tooltip-m"></div>
  </div>
  <div class="tp-cont tp-cont-t">
    <div class="tcp-tooltip tpc-tooltip-t"></div>
  </div>
  <div class="tp-cont tp-cont-e">
    <div class="tcp-tooltip tpc-tooltip-e"></div>
  </div>
</div>