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

  • 相关阅读:
    mac 终端常见指令
    git常见指令
    iOS8的autolayout和size class
    UIWindow详解
    操作系统Unix、Windows、Mac OS、Linux的故事
    iOS引用当前显示的UIAlertView
    Unexpected CFBundleExecutable Key
    《CODE》讲了什么?
    exit和return的区别
    php 登录注册api接口代码
  • 原文地址:https://www.cnblogs.com/liubingna/p/2942833.html
Copyright © 2011-2022 走看看