利用<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. VB API判断数组为空

    1. 'API判断数组为空或没有初始化 Private Declare Function SafeArrayGetDim Lib "oleaut32.dll" (ByRef saA ...

  2. Eclipse 写 Python的一些小问题

  3. 数组的翻转（非reverse()）

    方法一: var arr = [1,2,3,4]; var arr2 = []; while(arr.length) { var num = arr.pop(); //删除数组最后一个元素并返回被删除 ...

  4. C语言中连接器介绍

    在C语言中.一个重要的思想就是分别编译.即若干个源程序能够在不同的时候单独进行编译.然后在恰当的时候整合到一起.可是连接器通常是与C编译器分离的,连接器怎样做到把若干个C源程序合并成一个总体呢? 典型 ...

  5. ES6学习笔记十一：编程风格技巧

    一:用let取代var 二:静态字符串一律使用单引号或反引号,不使用双引号.动态字符串(模版字符串)使用反引号. 三:解构赋值: 使用数组对变量赋值时,优先使用解构赋值: 函数的参数如果是对象的成员, ...

  6. ORA-01950: no privileges on tablespace xxx ORA-01950: 对表空间 'xxx'无权限

    场景: 创建用户,在用户scheme下新建了一张表,插入数据时报错 ORA-01950: 对表空间 'xxx'无权限 创建用户 /*第1步:创建临时表空间 */ create temporary ta ...

  7. Vacuum tube 真空管/电子管

    真空管/电子管的发明 1904, John Ambrose Fleming invented the two-electrode vacuum-tube rectifier, which he cal ...

  8. spring aop实现日志收集

    概述 使用spring aop 来实现日志的统一收集功能 详细 代码下载:http://www.demodashi.com/demo/10185.html 使用spring aop 来实现日志的统一收 ...

  9. Dynamics CRM 2015 Update 1 系列(4): 自己定义主键 - Alternate Keys

    Alternate Keys. 还是和系统集成相关的一个重量级Feature.使用该Feature能极大的提高开发数据集成接口的时间成本以及接口的执行效率. 在之前的Dynamics CRM 版本号中 ...

  10. appfuse的使用方法

     2008-07-27  appfuse是如何使用的? 比如我想编写一个 struts+spring+hibernate+ajax的网站,如何用appfuse加速我的开发进度呢 ----------- ...