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>

  • 相关阅读:
    跟我学Angular2(1-初体验)
    JavaScript之糟粕
    JavaScript之毒瘤
    CSS布局(下)
    CSS布局(上)
    ES6入门系列三(特性总览下)
    ES6入门系列四(测试题分析)
    setTimout执行时间
    进程和线程关系及区别
    css3新单位学习
  • 原文地址:https://www.cnblogs.com/wuliwuli/p/5134000.html
Copyright © 2011-2022 走看看