Question

I have a list item with a image and text. The text is going over the image. When i hover over the text. Then the text going away and you can see the picture.

I have this html:

 <ul>
                    <li><img src="content/img/voorbeeld/projecten.jpg" alt="Project foto" width="209" height="207" />
                        <div class="text">
                            <h4>Nieuwbouw Aalanden Zwolle</h4>
                            <p>Vestibulum eget tristique ante. In hac habitasse platea dictumst.</p>
                            <a href="projecten.html" title="Project details">Project details</a>
                        </div>
                    </li>
                    <li><img src="content/img/voorbeeld/projecten.jpg" alt="Project foto" width="209" height="207" />
                        <div class="text">
                            <h4>Nieuwbouw Woonwijk in Amsterdam</h4>
                            <p>Vestibulum eget tristique ante. In hac wegweg wegweg weg tumst In hac habita abitasse platea dictumstIn hac habitasse platea dictumst.</p>
                            <a href="projecten.html" title="Project details">Project details</a>
                        </div>
                    </li>
                </ul>

And this javascript

var div     = $(".projects li"); 

    $("#footer .projects li",this).hover(function()
    {       
        if(div.hasClass("open"))
        {
            $(".projects .text").show();
            div.removeClass("open");
        }
        else
        {
            $(".text").hide();
            div.addClass("open");
        }
    });

But when i now hover of a li item. All the text of the two li items going away. How can i make it. When i hover over a item, that the other is not going away??

Answer 1

You haven’t provided code where does this come from, but the code you’re using should probably be more along these lines:

//               "this" context is unknown from your code
$(".projects li", this).hover(function()
{
    // save jQuery "this" for faster reuse 
    var $this = $(this);
    if($this.hasClass("open"))
    {
        $(".text", this).show();
        $this.removeClass("open");
    }
    else
    {
        $(".text", this).hide();
        $this.addClass("open");
    }
});