zoukankan      html  css  js  c++  java
  • 鼠标悬停显示透明文字内容

     最近得出一个css规律,凡是变化的css特效,总是在不同状态之间转换,只要规定好不同状态下的样式并使用 transition

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <meta charset="UTF-8" />
     5 <title>鼠标悬停显示透明文字内容</title>
     6 <style>
     7 .xuanting{
     8     width:220px;
     9     margin:40px auto;
    10     height:240px;/*宽高根据图片尺寸调整*/
    11     background:url(http://images.cnblogs.com/cnblogs_com/lhat/985631/o_lf.jpg) no-repeat;
    12     background-size: 100%;
    13     
    14     cursor:pointer;
    15     position:relative;
    16     overflow:hidden; /* 在no hover时隐藏过长内容 */
    17 }
    18 .xuanting span.neirong{
    19     width:100%;
    20     height:100%;
    21 
    22     position:absolute;/* 绝对定位*/
    23     top:100%;
    24     left:0; 
    25     color:red;
    26     background:#e5e5e5;
    27     opacity:0.4;
    28     text-align:center;
    29     
    30     /* 动画效果 */
    31     transition:top 1s ease-out;
    32 }
    33 .xuanting:hover span.neirong{
    34     top:0;
    35 }
    36 
    37 </style>
    38 </head>
    39 <body>
    40     <div class="xuanting">
    41         <span class="neirong">我要成为海贼王的男人</span>
    42     </div>
    43 </body>
    44 </html>
    我要成为海贼王的男人
  • 相关阅读:
    查询SQL数据库中表占用资源情况的语句
    修改VMware网卡MAC的方法
    Ajax 与 .net Validator
    控件属性值绑定到数据
    一个设计的小例子警察抓小偷
    加密Web.config 文件中的敏感信息
    VS .Net 2005程序集换名之后的遗留问题
    为ASP.Net 创建和配置应用程序服务数据库
    ArcGIS 9.0 在Windows XP SP2 上安装的问题(数据保护造成的)
    使用客户端脚本
  • 原文地址:https://www.cnblogs.com/lhat/p/4762734.html
Copyright © 2011-2022 走看看