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的人仍然可以看到视觉效果。

希望这会有所帮助。

悬停在标签上的效果

1 个答案: