css 鼠标移过显示层 效果

]

 代码如下 复制代码
<!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>

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

时间： 2024-11-03 04:36:56

css 鼠标移过显示层 效果的相关文章

JavaScript 在网页上单击鼠标的地方显示层及关闭层_javascript技巧

在网页上单击鼠标的地方显示层,供用户选择地点,同时把用户选择的地点显示在文本框中.主要是控制层的显示.隐藏. 复制代码 代码如下: <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=gb2312"> <TITLE>层的隐藏显示练习</TITLE> <STYLE type="text/css&qu

JS+DIV实现鼠标划过切换层效果的方法

  本文实例讲述了JS+DIV实现鼠标划过切换层效果的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 <html> <head> <title>DIV层切换</title> <script language="Ja

鼠标移到图片放大效果

鼠标移到图片放大效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin:0; padding:0;} body { background:#000;} #container { width:1000px; margin: 50px

JS实现鼠标移上去显示图片或微信二维码_javascript技巧

废话不多说了,直接给大家贴代码了. <html> <head> <script type="text/javascript"> function showImg(){ document.getElementById("wxImg").style.display='block'; } function hideImg(){ document.getElementById("wxImg").style.displa

关于java 页面 输入框 鼠标移上去显示提示信息

问题描述 需要的效果是我做了一个定时任务让用户配置 但是cron表达式很容易错就需要做一个提示,来引导用户输入正确的表达式网上查了很多 大多都是 使用css样式 非常繁琐的 有没有简便的组件或方法 可以做到 解决方案 <!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>hover demo</title> <

js实现鼠标移上去显示图片或微信二维码

例子 <html> <head> <script type="text/javascript"> function  showImg(){ document.getElementById("wxImg").style.display='block'; } function hideImg(){ document.getElementById("wxImg").style.display='none'; } &l

JS+DIV实现鼠标划过切换层效果的实例代码_javascript技巧

<style>/*栏目切换样式开始*/.none {display: none;}.block {display: block;}/*头部样式*/.s_c {width:800px;text-align: center;}.s_c ul{clear:both;margin:0;}.s_c li{list-style:none;float:left;position: relative;width: 70px;}/**/.c_0 {background-color: #CCCCCC;} /*隐藏

javascript+css点击弹出层效果

Close

如何实现JS中鼠标移上去显示图片或微信二维码

废话不多说了,直接给大家贴代码了. <html> <head> <script type="text/javascript"> functionshowImg(){ document.getElementById("wxImg").style.display='block'; } functionhideImg(){ document.getElementById("wxImg").style.display=