css+jquery实现标签浮动效果《前端随笔》


制作一个标签浮动的效果：
今天突发奇想，想要用一下这个效果，于是就试着写了一个。
css如下：

.label {
    width:128px; 
    padding:10px 10px 15px; 
    text-align:center; 
    background:white; 
    border:1px solid #bfbfbf; 
    margin:2px 8px 5px 10px; 
    position: relative;
    float: left;
}
.move_on {
    margin:0px 10px 7px 8px;
    -webkit-box-shadow:3px 3px 2px rgba(135, 139, 144, 0.4); 
    -moz-box-shadow:3px 3px 2px rgba(135, 139, 144, 0.4); 
    box-shadow:3px 3px 2px rgba(135, 139, 144, 0.4); 
}

html代码：

<a href="#">
    <div class="label">
            《test-label》
    </div>
</a>

jquery代码：

$(".label").hover(function(){
    $(this).addClass("move_on");
}, function(){
    $(this).removeClass("move_on");
})

css+jquery实现标签浮动效果《前端随笔》

相关推荐