zoukankan      html  css  js  c++  java
  • 动态显示选项框

    效果(如上图): 鼠标滑到“应用”上时显示下面几个图标,鼠标离开后隐藏图标。

    方法:写一个<div>用来存放这些小图标,然后再鼠标滑动的时候append到“应用”所在的div里。(这里暂时先不要用下面的方法实现,用下面的方法实现,鼠标就不能移到各个图标上,因为鼠标一离开“应用”,图标框就会自动隐藏)

    效果(如上图):点击笑脸图标则弹出各种表情选项框,点击选项框外任意地方可以隐藏选项框。

    方法: 可任意涌上一种方法实现,也可以写一个div放置选项框,然后设置这个div的position为absolute;

    Tips:

    <title>Untitled Document</title>
    <style type="text/css">


    li {
    float: left;
    }
    .clear:after {
    content: ".";
    height: 0;
    visibility: hidden;
    display: block;
    clear: both;
    }

    ul {
    position: absolute;
    }
    </style>
    </head>

    <body>
    <div>
    <ul class="clear">
    <li><a class="clear" href="#"><img src="1.jpg"></a></li>
    <li><a href="#"><img src="2.jpg"></a></li>
    <li><a href="#"><img src="3.jpg"></a></li>

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

    如果包含ul的div不占据空间,则可能是因为你给ul或其它的tags的position设置为了absolute

  • 相关阅读:
    python基础 列表推导式
    信息时代的个人知识管理探微
    quaternion 四元数
    Display Lists在内存中的形式
    有关四元数 我所理解的四元数
    ogre scene_blend 透明
    ogre RenderTexture alpha rtt透明续
    四元数
    Ogre overlay实现帧动画
    贴图消失
  • 原文地址:https://www.cnblogs.com/liubingna/p/2942833.html
Copyright © 2011-2022 走看看