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

Question

I wonder if someone can help me find a solution to an effect hover to an image in my blog. The idea was when I hover an image, you see a div with the image information, link project name, date,...

What i have done is, assign two classes do the div information, class show and class hide , and at the beginning it apears with a class hide .

Then with jQuery/JavaScript when the img:hover it remove the class hide and add a class show .

the problem is, when i do hover to a image, appears the information of all images.

I am wonder if some can help me to make just appear the information of the image that the mouse are hover.

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

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

My JavaScript:

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

And by the way, if some one can tell me, how to hide the information again when the image is not hover, I appreciate to.

Answer 1

What about something simpler:

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

This way, using jquery .show and .hide you don't need to use the css which you created for the hover effect, since these jquery's functions already take care of the attributes.

Answer 2

If you don't need to support IE7 and lower, you can do this with just CSS using the adjacent sibling combinator selector, no JavaScript required:

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

That says: "Hide div.information when it's immediately after an img " but "Show div.information when it's immediately after a hovered img ". The latter rule being both later in the CSS and (I think ) more specific, it wins when the image is hovered and not when it isn't.

Live example - Works in modern browsers, including IE8 and higher.

Answer 3

the problem is, when i do hover to a image, appears the information of all images.

I believe this is because you're referencing the generic information class, not the id of a single div. Instead, use the adjacent sibling reference to get only the information for the image you're hovering. You could use the :nth-child() selector.

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

Also, you shouldn't have multiple divs with the same id.

Answer 4

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

This will grab the parent of the individual img which is being hovered, search within the parent and find the .information specific to that img.

Answer 5

Try this:

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

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

Answer 6

Try this

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