Question

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

Answer 1

I would try using the toggleClass method instead:

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

See this jsFiddle for a demonstration.