選項卡上的懸停效果

Question

如何在我的當前選項卡上添加懸停效果？

提前很多感謝

<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> 

Answer 1

有兩種方法，你可以做到這一點。

第一個選項是與CSS pseudo selector:hover去做，例如：

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

第二個選擇是與jQuery做到這一點和鉤到.hover()功能：

$('#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'); 
}); 

優先使用的方法是使用CSS，因此禁用JavaScript的用戶仍然可以看到視覺效果。

希望這有助於。