利用<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. spring mvc mongoDb

    http://www.cnblogs.com/dennisit/p/3372568.html 系统环境: 操作系统:  windows xp 数 据 库:  mongodb2.0.6 驱 动 包: S ...

  2. Android sdk content loader 0%

    打开Eclipse以后,一直在Android sdk content loader 0%,等了很长时间都没有变,解决的方法是Project->Clean->Clean all projec ...

  3. mybatis批量删除（逻辑删除）

    在Mapper.xml文件中 <!-- 批量删除 --> <delete id="deleteAd" parameterType="java.util. ...

  4. sell 项目 订单表 设计 及 创建

    1.数据库设计 2.订单表 创建 /** * 订单表 */ create table `order_master` ( `order_id` varchar(32) not null, `buyer_ ...

  5. cpan安装报错Invalid host name on line 1 at *FirstTime.pm line 1857.

    今天鼓捣一下CPAN,安装时出错: root@ubuntu:~# cpan install DBI CPAN.pm requires configuration, but most of it can ...

  6. 江南白衣整理和开发的java常用工具类

    江南白衣的公众号的介绍文章:http://mp.weixin.qq.com/s/6JUo1vmUa-7SuDH6yIxKeQ github的地址:https://github.com/springsi ...

  7. excel如何快速更改表格边框的颜色

    1.当完成基本的表格设置之后,对颜色不甚满意,怎么办 2.重新给表格选择一种颜色,这里会出现一个“笔”形状的鼠标箭头,不用理睬她 3.再次给表格统一加边框即可(开始--边框--所有框线)

  8. 3299 有序数组合并求第K大问题

    题目描述 Description 给出两个有序数组A和B(从小到大有序),合并两个有序数组后新数组c也有序,询问c数组中第k大的数 假设不计入输入输出复杂度,你能否给出一个O(logN)的方法? 输入 ...

  9. fullcalendar 使用教程

    $('#calendar') .fullCalendar( { header : { left : 'today prev,next', center : 'title', right : 'mont ...

  10. Java Web项目总结

    知识点列表(慢慢增加,红色代表公司暂时没有使用): 开发: 视图层技术——HTML,CSS,JS,AJAX,Tiles,Velocity,FreeMarker 持久层技术——MyBatis,Hiber ...