タブ上のホバー効果

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

第2のオプションは、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を無効にしている人はまだ視覚効果を見ることができます。

これが役に立った。