如何通过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属性都是不相关的，这是一件好事，因为它保持逻辑DRY。

$('.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>