Question

我有多个带有printPic类的div框，它们将拥有自己唯一的ID。在悬停时/外出时，切换printPicOverlay的{{1}}的显示。我现在设置的方式是，所有ID的printPic都会在悬停时切换。

对于每个个人ID，在悬停时显示/隐藏printPicOverlay的最佳方法是什么？

＆＃13;

printPicOverlay

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

Answer 1

只是添加另一种选择 - 这在纯CSS中非常简单，没有任何Javascript / JQuery：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

它也可能更高效 - 使用本机浏览器功能而不是通过jquery查找元素。

Docs on :hover pseudoclass

如果您想要为叠加层外观设置动画，可以稍微调整一下（visibility而不是display等）：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用类似于以下内容的$(this).find()。

jQuery find的作用是通过指定的选择器.printPicOverlay获取所有后代，并仅切换那些匹配的元素。

使用$(this)将仅使用当前悬停的元素的上下文。

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 3

而是使用$(this)，$(this).find()如：

$(this).find(".printPicOverlay").toggle();

请看下面的代码段：

$(".printPic").hover(function () {
$(this).find(".printPicOverlay").toggle();
}, function () {
$(this).find(".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 4

问题是因为您需要使用this关键字find() h .printPicOverlay 中的.printPic元素，如下所示：

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

.printPic { height: 10em; width: 10em; display: inline-block; background-color: red; position: relative; } .printPicOverlay { height: 100%; width: 100%; background-color: 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>

然而，单独使用CSS会更好，更简单。根本不需要JS：

.printPic { height: 10em; width: 10em; display: inline-block; background-color: red; position: relative; } .printPicOverlay { height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.4); display: none; position: absolute; } .printPic:hover .printPicOverlay { display: block; }

<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 5

$('#' + $(this).attr('id') + '> div').toggle(100);// with little animation

只是一种不同的方法;我宁愿只使用@helb的CSS。

虽然你已经超过元素;通过切换，您可以实现目标。如果你愿意，可以用一点动画。

＆＃13;

$(function(){
   $(".printPic").hover(function () {
      $('#' + $(this).attr('id') + '> div').toggle(100); 
   });
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

5 个答案: