zoukankan      html  css  js  c++  java
  • 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");
    })

      

  • 相关阅读:
    TeX系列: tikz-3dplot绘图宏包
    TeX系列: MATLAB和LaTeX结合绘图
    Tex系列: pgfplots安装
    C 标准库
    C 标准库
    C 标准库
    C 标准库
    C 标准库
    C 标准库
    C 标准库
  • 原文地址:https://www.cnblogs.com/crab-allm/p/3380661.html
Copyright © 2011-2022 走看看