Jquery：图像悬停时隐藏并显示一个div答案

【问题标题】：Jquery: Hide and show a div when image is hoverJquery：图像悬停时隐藏并显示一个div
【发布时间】：2012-01-26 18:59:06
【问题描述】：

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

我所做的是，分配两个类来处理 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");      
});

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

【问题讨论】：

标签： javascript jquery css html

【解决方案1】：

更简单的呢：

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

这样，使用 jquery .show 和 .hide 你不需要使用你为悬停效果创建的 css，因为这些 jquery 的功能已经占用关心属性。

【讨论】：

【解决方案2】：

如果您不需要支持 IE7 及更低版本，您可以使用 adjacent sibling combinator 选择器仅使用 CSS 来完成此操作，无需 JavaScript：

img + div.information {
    display: none;
}
img:hover + div.information {
    display: block;
}

上面写着：“当div.information 紧接在img 之后时隐藏div.information”但“在div.information 紧接在悬停 img 之后显示div.information”。后一条规则在 CSS 的后期和（我认为）更具体，它在图像悬停时获胜，而不是在悬停时获胜。

Live example - 适用于现代浏览器，包括 IE8 及更高版本。

【讨论】：

【解决方案3】：

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

我相信这是因为您引用的是通用信息类，而不是单个 div 的 id。相反，请使用相邻的兄弟参考来仅获取您悬停的图像的信息。您可以使用 :nth-child() 选择器。

$("#content:nth-child(1)")

另外，你不应该有多个具有相同 id 的 div。

【讨论】：

【解决方案4】：

$(this).parent().find('.information').addClass("mostrar")
    .removeClass("hide");

这将抓取被悬停的单个 img 的父级，在父级中搜索并找到特定于该 img 的 .information。

【讨论】：

【解决方案5】：

试试这个：

$('img').hover(function(){
    $(this).siblings('.information').removeClass('hide').addClass('mostrar').addClass('show');

}, function(){
    $(this).siblings('.information').removeClass('show').removeClass('mostrar').addClass('hide');
});

【讨论】：

【解决方案6】：

试试这个

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

【讨论】：