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）关键字是您正在调用hover（）的对象。所以我们找到（）孩子们在课堂上徘徊的东西.overlay

Answer 2

您可以使用纯CSS执行此操作，使用:hover上的.img和transition opacity .overlay {/ 1}}

＆＃13;

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

＆＃13;

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

＆＃13;

在悬停fadeToggle时有多个div

2 个答案: