0

In my application a bunch of images is listed side by side. When hovering an image information about the image is shown (description, title etc). This works in most cases, but many times it don't.

For example, when I'm hovering an image and reload the page the toggling works in the other direction on this image, ie. by default the hidden div is shown and it's hidden when I'm hovering it (on all the other images it works fine).

This is really annoying, and I don't know how to solve it. Below is the code for this (hopefully it's enough).

I would appreciate if someone could help me out here.

JS:

    $('.post').hover(function () {
        var image = $(this);
        image.find('.postDesc').toggle();
    });

HTML:

<div class="post">
    <img class="images" src="../images/image.png">
    <div class="postDesc">
        // other code...

CSS:

.post {
    background: white;
    width: 200px;
    height: 200px;
    margin: 0px auto;
    float: left;
    margin-right: 30px;
    margin-bottom: 30px;
    position: relative;
    padding: 5px;
    -moz-box-shadow: 0 0 4px 1px #777;
    -webkit-box-shadow: 0 0 4px 1px#777;
    box-shadow: 0 0 4px 1px #777;
}

.postDesc {
    background-color:rgba(136, 136, 136, 0.35);
    color: white;
    width: 180px; 
    height:180px; 
    display:none; 
    position:absolute;
    margin: 5px;
    left: 0;
    bottom: 0;
    padding: 10px;
}

2 Answers 2

2

I would try using the toggleClass method instead:

$(this).find(".postDesc").toggleClass("post");

See this jsFiddle for a demonstration.

2
  • Thanks for your answer! I tried your solution, but nothing really happens when hovering an image. I tried changing "post" in your code to "postDesc" which works for the hovering part, but when I remove the cursor from the image, the class is stil there. Maybe I'm doing something wrong? May 7, 2012 at 18:59
  • Your code doesn't seem to work for me. Tried the code from jsFiddle but the class just keep flashing very fast on/off when hovering. In "postDesc" I have "display:none;", so I wonder if toggling classes works? May 7, 2012 at 19:17
0
$('.post').hover(
 function () {
     $('.postDesc', $(this)).addClass('post');
 },
 function() {
     $('.postDesc', $(this)).removeClass('post');
 });
1
  • Isn't this almost exactly the same as my answer? May 7, 2012 at 19:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.