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可以更有效地实现这一目标。如果您向'tuple' object has no attribute 'scatter'和tp-cont-X元素添加了一些通用类，则可以使用tpc-tooltip-X伪选择器，如下所示：

:hover

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

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

.tp-cont:hover .tpc-tooltip {
  display: block;
}

Answer 2

正如已经建议的那样，我将使用纯CSS和:hover伪代码。
如果由于某种原因真的想要jQuery，那将是代码的翻版。

基本上（除了在元素中添加通用类[请参见下面的代码]），您还需要当前悬停元素的$(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>

Answer 3

尝试在悬停中使用index。

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(index, item) {
    $(tcpTooltipDiv).eq($(this).index()).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>

多个div的悬停功能相同

3 个答案: