ul li mouseover

ul li mouseover

i am trying to do a mouseover effect with some images inside an unordered list. i have a lot of divs in my html (some are generated) but its fairly straight forward. i have tried all sorts of variations on my jquery code below but cannot get it to alert me. i am not sure if the other div containers matter at all or not. i am banging my head against the wall here, any input would be appreciated.

Jim



$(document).ready(function() { 
   
    $("#navigation li")
    .hover(function(){
        alert('you rolled over');
    });

});

<div id="container">

    <div id="container1">
       
        content
       
        <div class='yyy'>
        <div id='xxx'>
   
            <div id="inventoryContainer">

            <ul id="navigation">
                <li><a href="#"><img src="1" id="1"></a></li>
                <li><a href="#"><img src="2" id="2"></a></li>
                <li><a href="#"><img src="3" id="3"></a></li>
                <li><a href="#"><img src="4" id="4"></a></li>
                <li><a href="#"><img src="5" id="5"></a></li>
                <li><a href="#"><img src="6" id="6"></a></li>
            </ul>
   
            </div>
   
        </div>
        </div>
   
    </div>

</div>