Question

Here my Jquery code:

<script>
            $('.smenu li').hover(function() {       
                var lid = $(this).find('li').attr('id'); 
                closeAll(); 
               //show perticular div
                if(lid == "d1")
                    {
                        $('.hbg div#info1').show();
                    }
                else if(lid == "d2")
                    {
                        $('div#info2').show();
                    }
                else if(lid == "d3")
                    {
                        $('div#info3').show();
                    }
            });   

            function closeAll()   
            {   
                $('div#info1').hide();
                $('div#info2').hide();
                $('div#info3').hide();

            } 
          </script>

Here my info div-s:

<div class="hbg">
            <div class="solu_info" id="info1">
              //display information
             </div>
            <div class="solu_info" id="info2">
              //display information
             </div>
.....
</div>  

<div class="smenu">
                <ul>
                  <li id="d1"><a href="#"><img src="images/menu_hosp.jpg" border="0"></a></li>
....

onmouse over the div tags are not getting changed. Why?

Answer 1

Inside the hover event handler, this is going to be an li, since it is attached to $('.smenu li'). Then $(this).find('li') will find li elements inside .smenu li, which presumably don’t exist.