javascript - 获取具有相同类的元素的 id

Question

我有多个类为 printPic 的 div 框，它们将有自己的唯一 ID。悬停在/悬停时，切换 printPicOverlay 的显示，它是 printPic 的子项。我现在设置它的方式是，所有 id 的 printPicOverlay 都在悬停时切换。

在悬停时为每个单独的 id 显示/隐藏 printPicOverlay 的最佳方式是什么？

$(".printPic").hover(function () {
$(".printPicOverlay").toggle();
}, function () {
$(".printPicOverlay").toggle();
});

.printPic{
  height: 10em;
  width: 10em;
  display: inline-block;
  background: red;
  position: relative;
}

.printPicOverlay{
  height: 100%;
  width: 100%;
  background: rgba(0,0,0,0.4);
  display: none;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "printPic" id = "1">
  <div class = "printPicOverlay"></div>
</div>

<div class = "printPic" id = "2">
  <div class = "printPicOverlay"></div>
</div>

<div class = "printPic" id = "3">
  <div class = "printPicOverlay"></div>
</div>

Answer 1

只是添加另一种选择——这在纯 CSS 中非常容易，无需任何 Javascript/JQuery:

.printPic {
  height: 10em;
  width: 10em;
  display: inline-block;
  background: red;
  position: relative;
}

.printPicOverlay {
  height: 100%;
  width: 100%;
  background: rgba(0,0,0,0.4);
  display: none;
  position: absolute;
}

.printPic:hover .printPicOverlay {
  display: block;
}

<div class="printPic" id="1">
  <div class="printPicOverlay"></div>
</div>

<div class="printPic" id="2">
  <div class="printPicOverlay"></div>
</div>

<div class="printPic" id="3">
  <div class="printPicOverlay"></div>
</div>

它的性能也可能更高一些——使用 native 浏览器功能而不是通过 jquery 查找元素。

Docs on :hover pseudoclass

如果您想为叠加层外观设置动画，可以进行一些调整(visibility 而不是 display 等):

.printPic {
  height: 10em;
  width: 10em;
  display: inline-block;
  background: red;
  position: relative;
}

.printPicOverlay {
  height: 100%;
  width: 100%;
  background: rgba(0,0,0,0.4);
  position: absolute;
  visibility: hidden;
  opacity: 0;
  transform: scale(0.8) translate(0, 10%);
  transition: visibility 0s, opacity 0.5s ease-in, transform 0.3s ease-in;
}

.printPic:hover .printPicOverlay {
  transform: scale(1);
  visibility: visible;
  opacity: 1;
}

<div class="printPic" id="1">
  <div class="printPicOverlay"></div>
</div>

<div class="printPic" id="2">
  <div class="printPicOverlay"></div>
</div>

<div class="printPic" id="3">
  <div class="printPicOverlay"></div>
</div>