Question

I’m putting together a nav bar and found a nice script to allow a li to keep in its ‘hover’ state while a 2nd level menu is displayed. In my last li I have a search bar and would like to remove the hover. Code:

<script type="text/javascript">
$(document).ready(function() {

    $("ul#topnav li").hover(function() { //Hover over event on list item
        $(this).css({ 'background' : '#7bbdc2 '}); //Add background color + image on hovered list item
        $(this).find("span").show(); //Show the subnav 
    } , 
    function() { //on hover out...
        $(this).css({ 'background' : 'none'}); //Ditch the background
        $(this).find("span").hide(); //Hide the subnav
    }); 
});
</script>    

Answer 1

You can exclude an element from the selector. Do that.

<script type="text/javascript">
$(document).ready(function() {

    $("ul#topnav li").not('li:last').hover(function() { //Hover over event on list item
        $(this).css({ 'background' : '#7bbdc2 '}); //Add background color + image on hovered list item
        $(this).find("span").show(); //Show the subnav 
    } , 
    function() { //on hover out...
        $(this).css({ 'background' : 'none'}); //Ditch the background
        $(this).find("span").hide(); //Hide the subnav
    }); 
});
</script>