hover effect on tabs

how can i add a hover effect on my current tabs?

many thanks in advance

<script type="text/javascript"> 
$(document).ready(function(){
$('#tabs div').hide();
$('#tabs div:first').show();
$('#tabs ul li:first').addClass('active');
$('#tabs ul li a').click(function(){ 
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active'); 
var currentTab = $(this).attr('href'); 
$('#tabs div').hide();
$(currentTab).show();
return false;
});
});
</script>

       <style>  
          #tabs {
                font-size: 90%;
                margin-top: 0px;
                margin-right: 0;
                margin-bottom: 20px;
                margin-left: 0;
                width: 170px;
            }
            #tabs ul {
                float: left;
                width: 170px;
                padding-top: 4px;
                background: -webkit-gradient(linear, 0 0, 0 60%, from(#666769), to(#464445));
                background: -moz-linear-gradient(#666769, #464445 60%);
                background: linear-gradient(#666769, #464445 60%);
                -pie-background: linear-gradient(#666769, #464445 60%);
            }
            #tabs li {
                margin-left: 4px;
                list-style: none;
                width: 37px;
            }
            * html #tabs li {
                display: inline;
            }
            #tabs li, #tabs li a {
                float: left;
            }
            #tabs ul li.active {
                border-top:0px #FFFF66 solid;
                background: #FFFFCC;
            }
            #tabs ul li.active a {
                color: #333333;
            }
            #tabs div {
                clear: both;
                padding: 15px;
                min-height: 200px;
                width: 170px;
            }
            #tabs div h3 {
                margin-bottom: 12px;
            }
            #tabs div p {
                line-height: 150%;
            }
            #tabs ul li a {
                text-decoration: none;
        开发者_运维知识库        padding: 8px;
                color: #000;
                font-weight: bold;
            }
            .thumbs {
                float:left;
                border:#000 solid 1px;
                margin-bottom:20px;
                margin-right:20px;
            }
            -->
            </style>

There are two ways you could do it.

The first option is to do it with the CSS pseudo selector :hover, for example:

#tabs ul li a:hover
{
    background: #f00;
}

The second option is to do it with jQuery and hook in to the .hover() function:

$('#tabs ul li a').hover(function() {
    // Mouse is over the link
    $(this).css('background', '#f00');    
},
function() {
    // Mouse isn't hovering over the link any longer
    $(this).css('background', '#fff');
});

The preffered way is to do it with CSS so people whom have javascript disabled will still be able to see the visual effects.

Hope this helped.