javascript - Jquery:当图像悬停时隐藏和显示div

Question

我想知道是否有人可以帮助我找到解决方案，使我的博客中的图像悬停效果。 这个想法是，当我将鼠标悬停在图像上时，您会看到一个包含图像信息、链接元素名称、日期等的 div，...

我所做的是，分配两个类来处理div信息，类show和类hide，并且在开始时它出现一个类hide .

然后使用 jQuery/JavaScript，当 img:hover 时，它会删除类 hide 并添加类 show。

问题是，当我将鼠标悬停在图像上时，会显示所有图像的信息。

我想知道是否有人可以帮助我使鼠标悬停时只显示图像的信息。

我的 HTML:

<div id="content">
  <img src="images/1.jpg" alt="Projecto 1" height="290" width="220" />
  <div class="information hide">
      <h2>Titulo</h2>
      <p>Lorem Ipsun</p>
      <a href="#" class="info">Read More</a>
  </div>
</div>

<div id="content">
  <img src="images/1.jpg" alt="Projecto 1" height="290" width="220" />
  <div class="information hide">
      <h2>Titulo</h2>
      <p>Lorem Ipsun</p>
      <a href="#" class="info">Read More</a>
  </div>
</div>

我的CSS:

body div.information {
background: rgba(219, 49, 49, 0.52);
width: 220px;
height: 290px;
position: relative;
top: -290px;
}

/* 悬停效果 */

.hide {
display: none;
}

.show {
display: block;
}

我的 JavaScript:

$('img').hover(function() {
    $('.information').addClass("mostrar");
    $('.information').removeClass("hide");      
});

顺便说一句，如果有人可以告诉我，如何在图像未悬停时再次隐藏信息，我很感激。

Answer 1

更简单的事情怎么样:

$("div.content > img").hover(function() {
    $(this).next(".information").show(); //hover in
}, function() {
    $(this).next(".information").hide(); //hover out
});

这样，使用 jquery .show 和 .hide 你就不需要使用为悬停效果创建的 css，因为这些 jquery 的函数已经采用注意属性。