zoukankan      html  css  js  c++  java
  • css 鼠标滑过显示隐藏内容

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>css鼠标滑过隐藏文字</title>
    <style>
    .divc{
    400px;
    height:400px;
    background:#99CC66;
    margin:0px auto;
    margin-top:200px;
    position:relative;
    }
    .divc-up{
    background:#FFCCCC;
    background-size:100% 100%;
    100%;
    height:100%;
    opacity:0.3;
    position:absolute;
    top:0px;
    left:0px;
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition: all 0.1s ease-in 0.1s;
    -moz-transition: all 0.1s ease-in 0.1s;
    -o-transition: all 0.1s ease-in 0.1s;
    -ms-transition: all 0.1s ease-in 0.1s;
    transition: all 0.1s ease-in 0.1s;
    }
    .divc:hover .divc-up{
    filter: alpha(opacity=100);
    opacity: 0.8;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -ms-transition-delay: 0s;
    transition-delay: 0s;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);
    }
    </style>

    </head>

    <body>
    <div class="divc">
    <div class="divc-up"></div>
    </div>
    </body>
    </html>

  • 相关阅读:
    go语言的grpc安装记录
    MySQL1:客户端/服务器架构
    设计模式
    乐观锁与悲观锁的选择
    compareAndSwapObject 产生ABD原因
    wangEditor
    ckeditor4学习
    git公司远程提交
    java面试题总结
    基本数据类型和包装类
  • 原文地址:https://www.cnblogs.com/wuliwuli/p/5134000.html
Copyright © 2011-2022 走看看