탭에서 마우스 오버 효과

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(function() { 
    // Mouse is over the link 
    $(this).css('background', '#f00');  
}, 
function() { 
    // Mouse isn't hovering over the link any longer 
    $(this).css('background', '#fff'); 
}); 

:

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

번째 옵션 JQuery와 함께 수행 및 .hover() 함수에 후크 인 preffered 방법은 CSS를 사용하여 자바 스크립트를 사용하지 않는 사람들이 여전히 시각 효과를 볼 수 있도록하는 것입니다.

희망이 도움이되었습니다.