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

/ * HOVER EFFECT * /

.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的函数已经占用照顾属性。

Answer 2

如果你不需要支持IE7及更低版本，你可以使用adjacent sibling combinator选择器只使用CSS，不需要JavaScript：

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

说：“在div.information之后立即隐藏img”，但在悬停之后立即显示div.information img ”。后一种规则在CSS的后期和（我认为）更具体，它在图像悬停时获胜，而不是在图像悬停时获胜。

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

Answer 3

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

我相信这是因为你引用了通用信息类，而不是单个div的id。而是使用相邻的兄弟参考来获取您正在悬停的图像的信息。您可以使用：nth-child（）选择器。

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

此外，您不应该有多个具有相同ID的div。

Answer 4

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

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

Answer 5

试试这个：

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

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

Answer 6

试试这个

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

Jquery：当图像悬停时隐藏并显示div

6 个答案: