css样式实现鼠标滑过显示&鼠标滑过块上移

1,纯css样式实现鼠标滑过显示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
    *{margin: 0; padding: 0;font-family:arial;}
    .messdiv{position: relative;width: 150px; height: auto;font-size: 14px;margin: 20px 0 0 20px;}
    .selecshow{display: none;position: absolute;border: 1px solid #ccc; box-shadow: 0px 8px 16px 0px #666;padding: 10px;min-width: 140px;line-height: 30px;}
    .messdiv:hover .selecshow{display: block;}

    </style>
<body>
     <div class="messdiv">
          <span>鼠标划我显示下拉信息</span>
          <div class="selecshow">
                <p>下拉信息1</p>
                <p>下拉信息2</p>
          </div>
     </div>

</body>
</html>

2 ,纯css样式实现鼠标滑过 块上移特效

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">

     li{
         list-style: none;
         width: 200px;
         height: 200px;
         background: greenyellow;
         border: solid 2px red;
         float: left;
         margin-left: 10px;
         transition: transform 0.1s;
     }

      li:hover{
          cursor: pointer;
          transform: translate(0,-10px);
      }

    </style>

<body>
        
    <div>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>

        </ul>
    </div>

</body>
</html>

这两个例子真是简单易懂,建议初学者看看。

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页