利用<a>标签的a:hover状态触发鼠标移过的动作，其中未触发状态显示为单个图片。兼容IE6/7/8以及FF/Chrome等主流浏览器。以下是图示及完整代码。

原文：http://www.cnblogs.com/eecc/articles/2225473

<!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" lang="zh-CN">
<head>
<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 {width: 110px;}
ul.onMShow li {list-style:none; background-position:left top; background-repeat:no-repeat;}
ul.onMShow li a {position: relative;display:block; width:200px; height:50px;border:none;}
ul.onMShow li a div {display: none;}
ul.onMShow li a:hover {background::none;display:block; width:auto;}/*此处需定义宽度，否则IE6下无法正常显示*/
ul.onMShow li a:hover div{display:block;position: absolute;padding:5px;width: 272px;left:0px;top: 0px;border: 1px solid #BDBDBD;background-color: #E4F6FF;cursor:pointer;}
ul.onMShow li a img {width:80px;height:80px;border:none;display:block;position: absolute;top:5px;left:5px;}
ul.onMShow li dl {width: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(http://img4.cache.netease.com/stock/2009/9/5/2009090523262247607.png)"><a href="http://money.163.com/09/0703/18/5DALA0IV002526O5.html"><br /><div><img src="http://img3.cache.netease.com/stock/2009/9/5/2009090523262766842.png" alt="常德传"/>
<dl>
    <dd><span>常德传</span><h5>青岛港集团董事局主席</h5></dd>
    <dd>在困难的时候企业就是要手拉手，肩并肩，不能想单打独斗，抱团合作是唯一出路。</dd>
</dl></div></a></li>
</ul>
</body>
</html>

转：纯CSS实现“鼠标移过显示层”效果的更多相关文章

  1. 可以兼容ie6的纯CSS三级鼠标悬停显示/隐藏菜单实现

    本来在chrome上用js写的好好的三级显隐菜单,放到ie6上一测试竟然奇葩般的会瞎闪.问题原因至今没参透,可能是我每次响应事件的处理代码过长??总之我是对ie6幻灭了,去网上搜一搜能支持ie6的下拉 ...

  2. 纯css实现鼠标感应弹出二级菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. CSS3实战开发: 纯CSS实现图片过滤分类显示特效

    原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效 各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运 ...

  4. 不可思议的纯 CSS 实现鼠标跟随效果

    直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS 负责表现,JavaScript 负责行为.而鼠标跟随这种效果属于行为,要实现通常都需要 ...

  5. [css]演示：纯CSS实现的右侧底部简洁悬浮效果

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name ...

  6. CSS实现input默认文字灰色有提示文字点击后消失鼠标移开显示

    CSS实现input美化操作默认是为灰色,并且有提示 如下图 鼠标点击后文字消失,鼠标移开后文字显示 给input入下图添加代码 style="color:#cccccc; outline: ...

  7. 【Web】CSS实现鼠标悬停实现显示与隐藏 特效

    鼠标悬停实现显示与隐藏特效 简单记录 - 慕课网 Web前端 步骤四:鼠标悬停实现显示与隐藏特效 初步掌握定位的基本使用,以及CSS选择器更高级的运用,完成一个网页中必会的鼠标经过隐藏显示特效. 实现 ...

  8. 纯CSS实现的右侧底部简洁悬浮效果

    我们见过很多页面右侧浮动效果,最早有QQ联系面板,对联广告等,大多数都是基于Javascript实现的动态效果,今天我给大家分享一个只需要CSS结合DIV实现的右侧浮动效果. HTML 我们希望悬浮效 ...

  9. selenium 怎么查找定位鼠标移上去显示，移开鼠标就消失的内容

    场景:鼠标移动到一级菜单上二级菜单才显示,移开鼠标二级菜单就消失,如何查找定位二级菜单 操作: 1.打开F12,点击sources 2.鼠标移动到一级菜单“工单管理” 3.按下键盘“Ctrl+\”,暂 ...

随机推荐

  1. 连通性问题--Algorithms IN C读书笔记

    近期在看<Algorithms IN C>这本书.刚開始看,读的是英文版的.感觉作者的叙述有点不太easy理解.就找了一本中文版的来看,发现还是看英文版的比較好.先看了第一章的大部分,后面 ...

  2. C#的ThreadStart 和 Thread

    多线程,new Thread(t1);和new Thread(new ThreadStart(t1));有什么区别 没有区别. 前者,是c#的语法.也就是说是编译器帮你改写为第二种形式. 因此你要搞清 ...

  3. Python学习笔记九：正则表达式

    一:正则表达式的符号与方法 常用符号: .:匹配任何一个字符,换行符除外(所以,多行字符串中的匹配要特殊处理,见下面实例) *:匹配前一个字符0次或多次 +:匹配前一个字符1次或多次 ?:匹配前一个字 ...

  4. 用RotateDrawable实现网易云音乐唱片机效果

    imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="唱片机" title=""> ...

  5. Tomcat服务器版本号泄露-低危漏洞修复

    一.问题描述Tomcat报错页面泄漏Apache Tomcat/7.0.52相关版本号信息,是攻击者攻击的途径之一.因此实际当中建议去掉版本号信息.二.解决办法 1.进入到tomcat/lib目录下, ...

  6. rtl-sdr在win7和ubuntu16.04的安装

    硬件准备 RTL2832+R820T2 usb dongle x 1 Long wire antenna x 1 USB电视棒的购买: 在淘宝上搜索"软件无线电"或"rt ...

  7. 基于Echarts的中国地图数据展示

    发布时间:2018-10-31   技术:javascript+html5+canvas   概述 基于echarts的大数据中国地图展示,结合API定制,开发样式,监听鼠标事件,实现带参数路由跳转等 ...

  8. null的数据类型

    Oracle的NULL代表的含义是不确定,那么不确定的东西也会有确定的数据类型吗?或者换个说法,NULL在Oracle中的默认数据类型是什么,下面就来探讨这个问题. 首先公布答案,NULL的默认类型是 ...

  9. linux shell 脚本攻略学习15--如何只列出目录,如何快速切换目录

    工作中经常遇到关于目录方面的问题,例如,如何只列出当前目录下的所有目录,以及如何快速高效的切换目录,而不需要使用鼠标,下面将简单介绍关于这两方面的解决方案: 一.如何只列出目录? 看似简单的任务,其实 ...

  10. 原创工具binlog2sql：从MySQL binlog得到你要的SQL

    从MySQL binlog得到你要的SQL.根据不同设置,你可以得到原始SQL.回滚SQL.去除主键的INSERT SQL等. 用途 数据回滚 主从切换后数据不一致的修复 从binlog生成标准SQL ...