Question

I was trying so many options, but no results. However, I have this code

<ul class="left_nav">
    <li class="left_nav1"><a href="#">opt1</a></li><li class="left_nav2">
    <a href="#">opt1</a></li><li class="left_nav3">
    <a href="#">opt1</a></li><li class="left_nav4">
    <a href="#">opt1</a></li><li class="left_nav5">
    <a href="#">opt1</a></li>
</ul>

and these div’s with images

<div id="news1" class="news">
    <a href="#" target="_blank"><img src="img/news/news1.jpg" width="340" height="255" alt="" title="" /></a>
</div>
<div id="news2" class="news">
    <a href="#" target="_blank"><img src="img/news/news2.jpg" width="340" height="289" alt="" title="" /></a>
</div>
<div id="news3" class="news">
    <a href="#" target="_blank"><img src="img/news/news3.jpg" width="340" height="232" alt="" title="" /></a>
</div>
<div id="news4" class="news">
    <a href="#" target="_blank"><img src="img/news/news4.jpg" width="340" height="250" alt="" title="" /></a>
</div>
<div id="news5" class="news">
    <a href="#" target="_blank"><img src="img/news/news5.jpg" width="340" height="226" alt="" title="" /></a>
</div>

Now class="news" by default is display: none;. With this jQuery

$(function() {
    $("ul.left_nav li").hover( function() {
            index = $("ul.left_nav li").index(this) + 1;
            $('#news' + index).addClass('active');
        }, function() {
            $('#news' + index).removeClass('active');
        }
    );
});

the div’s are appering on hover by adding the class active which is defined as display: block;. I want to remove this class again when the mouse is on the <ul> menu. But if the mouse leave the menu, then the last hovered <li> stays hovered, and the div with image will stay visible too. How can I realize that?

Thanks!​

Answer 1

bind it with mouseover and than make each event clear other news but the mouseovered one.

$("ul.left_nav li").mouseover( function () {

     index = $("ul.left_nav li").index(this)+1;

     $('.news').removeClass('active');

     $('#news'+index).addClass('active');

});