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

  • 相关阅读:
    增加/删除新用户并添加root权限
    LINUX学习之路-1
    了解参考基因组及注释信息
    RNA-seq操作实战
    如何利用数据库下载参考基因组
    RNA-Seq比对软件HISAT2的用法
    小白-批量下载SRR数据
    sratoolkit 的使用
    批量查看QC结果的工具----multiqc
    fastQC 质控结果解读
  • 原文地址:https://www.cnblogs.com/liubingna/p/2942833.html
Copyright © 2011-2022 走看看