利用<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. PYQT操作JS并且截图事例

    如何安装PYQT,可以查看我的上一篇文章:http://www.cnblogs.com/liqiu/p/3361948.html 然后运行下面的带有JS程序的Python脚本即可: #-*- codi ...

  2. stingray中的需要注意的地方

    TBLROWS中嵌套的单引号需要加倍用作转译

  3. 轻松把玩HttpClient之封装HttpClient工具类(五)，携带Cookie的请求

    近期更新了一下HttpClientUtil工具类代码,主要是加入了一个參数HttpContext,这个是用来干嘛的呢?事实上是用来保存和传递Cookie所须要的. 由于我们有非常多时候都须要登录.然后 ...

  4. shell语法使用

    这两天初次接触shell编程,所谓shell编程其实就是用一定的语法将各种基本的命令组合起来,让shell程序去解释执行.如果对windows的dos有了解,可以这样理解,其实shell脚本文件和.b ...

  5. SpringMVC学习笔记六：使用 hibernate-validator注解式数据校验

    对客户端传过来的参数,在使用前一般需要进行校验. SpringMVC框架内置了Validator验证接口,但是实现起来太麻烦.我们一般使用 hibernate-validator进行数据校验. 1:j ...

  6. 【Linux】压缩多个文件

    在使用Linux的过程中,可能需要将多个文件压缩到一个文件,这样方便复制与移动 多文件压缩案例 现在有文件列表如下: 将文件file_00.txt.file_01.txt.file_02.txt.fi ...

  7. 错误提示：通过 Web 服务器的身份验证的用户无权打开文件系统上的文件

    //win7中iis配置好了可是网页打不开,为什么.? //错误提示:通过 Web 服务器的身份验证的用户无权打开文件系统上的文件 //解决办法1.右键单击你的网站根目录文件夹,如wwwroot文件夹 ...

  8. INT函数和ROUND

    语法:INT(number) Number 需要进行向下舍入取整的实数

  9. CString与UTF8互转代码

    这个代码网上很多,留在这里做个备份. static std::string ConvertCStringToUTF8( CString strValue ) { std::wstring wbuffe ...

  10. jenkins关闭和重启

    我们用jar -jar jenkins.war来启动jenkins服务器,那么我们如何关闭或者重启jenkins服务器呢?经过搜索找到了相应的方法. 关闭jenkins服务 只需要在访问jenkins ...