多视点悬停fadeToggle的研究

Question

所以我有一些带有img的div。在img上方是一个隐藏的div，但将出现在img的悬停上。我知道如何使它工作，但我希望它更简单，这更多的是为了我自己的学习。我希望它能像我一样工作，只是更简单、更干净的jquery/javascript。

$('#img-1').hover(function(){
    $('#overlay-1').stop().fadeToggle(400);
});
$('#img-2').hover(function(){
  $('#overlay-2').stop().fadeToggle(400);
});

这就是它的作用：JsFiddle

Answer 1

 $('.img').hover(function(){
    $(this).find('.overlay').stop().fadeToggle(400);
 });

$(this)关键字是您正在对其进行调用的对象。因此，我们找到了与类.overlay一起徘徊的事物的子级。

Answer 2

您可以使用纯CSS，在.img上使用:hover，在.overlay上使用transition和opacity。

​

.img {
  position: relative;
}
.img > img {
  width: 200px;
  height: 200px;
}
.overlay {
  background-color: #f7c845;
  z-index: 100;
  position: absolute;
  height: 200px;
  width: 200px;
  opacity: 0;
  transition: opacity .4s;
}
.overlay > p {
  text-align: center;
  color: #212121;
  padding: 20px 40px;
}
.img:hover .overlay {
  opacity: 1;
}

<div class="img" id="img-1">
  <div class="overlay" id="overlay-1">
    <p>Hello World!</p>
  </div>
  <img src="https://s-media-cache-ak0.pinimg.com/736x/bf/4e/40/bf4e4067252227bd3f758bba7dcee2ff.jpg" alt="image">
</div>
<div class="img" id="img-2">
  <div class="overlay" id="overlay-2">
    <p>Hello World!</p>
  </div>
  <img src="https://s-media-cache-ak0.pinimg.com/736x/bf/4e/40/bf4e4067252227bd3f758bba7dcee2ff.jpg" alt="image">
</div>

​