如何通过 ID 在悬停时显示内容？

Question

我需要显示悬停在不同产品列表上的内容以及它们自己的 id。

这是我的代码..

$(document).ready(function() {
  $(".gift").hide();
  $(".box").hover(function() {
    var id = this.id;
    $(".gift").show();
  }, function() {
    $(".gift").hide();
  });
});

.box {
  float: left;
  margin: 10px;
  width: 140px;
  height: 20px;
  background: lightblue;
}

.gift {
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="producto_1" class="box">
  <div class="gift">
    PRODUCTO 1
  </div>
</div>
<div id="producto_2" class="box">
  <div class="gift">
    PRODUCTO 2
  </div>
</div>
<div id="producto_3" class="box">
  <div class="gift">
    PRODUCTO 3
  </div>
</div>

和一个JSFIDDLE

将鼠标悬停在每个框上时，我可以获取 ID 并将其保存到 var = id，但我不确定如何使用该 ID 进行显示。

Answer 1

你根本不需要 JS，使用 CSS 的 :hover 选择器，像这样：

.box {
  float: left;
  margin: 10px;
  width: 140px;
  height: 20px;
  background: lightblue;
}

.gift {
  text-align: center;
  display: none;
}

.box:hover .gift {
  display: block;
}

<div class="box">
  <div class="gift">
    PRODUCTO 1
  </div>
</div>
<div class="box">
  <div class="gift">
    PRODUCTO 2
  </div>
</div>
<div class="box">
  <div class="gift">
    PRODUCTO 3
  </div>
</div>

如果你真的想在 JS 中这样做，我不建议这样做，你可以使用 this 关键字来引用引发 hover 事件的元素，然后 toggle() 它的子 .gift 元素。无论您以哪种方式实现此目的，id 属性都是无关紧要的，这是一件好事，因为它使逻辑保持干爽。

$('.box').hover(function() {
  $(this).find('.gift').toggle();
});

.box {
  float: left;
  margin: 10px;
  width: 140px;
  height: 20px;
  background: lightblue;
}

.gift {
  text-align: center;
  display: none;
}

<div class="box">
  <div class="gift">
    PRODUCTO 1
  </div>
</div>
<div class="box">
  <div class="gift">
    PRODUCTO 2
  </div>
</div>
<div class="box">
  <div class="gift">
    PRODUCTO 3
  </div>
</div>

如何通过 ID 在悬停时显示内容？

How can I show content on hover by ID?

jquery

jquery-hover