• Css中移动鼠标层的转换


    新建一个MousMoveUpShow.aspx页面

    代码为:


    <!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 runat="server">
        <title>鼠标移上去显示层</title>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <meta http-equiv="Content-Language" content="zh-CN" />
        <meta content="all" name="robots" />
        <meta name="author" content="Netease" />
        <meta name="Copyright" content="Netease" />
        <meta name="keywords" content="" />
    <base target="_blank" />
    <style>
    *{margin:0px;padding:0px;}
    body { text-align:left; font-size:12px;}
    ul.onMShow { 110px;}
    ul.onMShow li {list-style:none; background-position:left top; background-repeat:no-repeat;}
    ul.onMShow li a {position: relative;display:block; 200px; height:50px;border:none; }
    ul.onMShow li a div {display: none;}
    ul.onMShow li a:hover {background::none;display:block; auto;}/*此处需定义宽度,否则IE6下无法正常显示*/
    ul.onMShow li a:hover div{display:block;position: absolute;padding:5px; 272px;left:0px;top: 0px;border: 1px solid #BDBDBD;background-color: #E4F6FF;cursor:pointer;}
    ul.onMShow li a img {80px;height:80px;border:none;display:block;position: absolute;top:5px;left:5px;}
    ul.onMShow li dl {180px;float:right;color: #000;line-height:20px;}
    ul.onMShow li dl dd span {font-weight: bold;color: #000; margin-right:5px;}
    ul.onMShow li dl dd h5 { font-size:12px; color:#979797; display:inline; font-weight:normal;}
    </style>
    </head>
    <body>
    <ul class="onMShow">
    <li style="background-image:url(Img/sq.jpg)">
     <a href="http://money.163.com/09/0703/18/5DALA0IV002526O5.html"><br />
    <div>
    <img src="Img/c.jpg" alt="点击有超链接" />
    <dl>
    <dd><span>aimee</span></dd>
    <dd>鼠标移动换层</dd>
    </dl>
    </div>
    </li>
    </ul>
      
    </body>
    </html>

    结果为:先显示sq.jpg图片,当鼠标移动上去时,换成显示c.jpg以及文字层

  • 相关阅读:
    python基础----装饰器
    python基础----函数的定义和调用、return语句、变量作用域、传参、函数嵌套、函数对象、闭包、递归函数
    python基础----文件处理
    python基础
    django时间的时区问题
    django-admin详细设置
    Django框架-模板系统
    Django框架--路由分配系统
    jQuery教程
    django博客项目11
  • 原文地址:https://www.cnblogs.com/blncle/p/2492074.html
Copyright © 2020-2023  润新知