js控制鼠标经过显示文字信息

首页 > javascript > js控制鼠标经过显示文字信息

js控制鼠标经过显示文字信息

2010年3月16日 luo

自己写的js控制鼠标经过图片上显示文字描述信息，兼容主流浏览器，点击下面运行可以看到效果。

<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>鼠标经过显示文字信息</title> <style type="text/css"> * { margin:0px; padding:0px;} html{color:#333;background:#FFF;} body{ text-align:left; font-style:normal; font-size:12px; line-height:20px; font-family:"宋体";} ul,ol,li{list-style:none;} table{ border-collapse:collapse; border-spacing:0;} img,fieldset {border:0;} h1,h2,h3,h4,h5,h6{font-size:14px;} input,label,select,option,textarea,button,fieldset,legend,table,td {font-size:12px;} sup {vertical-align:text-top;} sub {vertical-align:text-bottom;} address,caption,cite,code,dfn,em,th,var {font-style:normal;font-weight:normal;} a { color:#333; text-decoration:none; font-style: normal; } a:hover{ color:#F00; text-decoration:underline; cursor: pointer;} #picShow{ width:303px; margin:0 auto; overflow:hidden; zoom:1; background:#060007; padding:10px 0;} #picShow li{ float: left; width:136px; height:101px; border:1px solid #0F3; margin-left:8px; position:relative;} .intro{ position:absolute; width:126px; height:91px; padding:5px; left:0px; top:0px; background:#34BEDA; filter:alpha(Opacity=90); opacity:0.9; display:none;} </style> <script type="text/javascript"> function checkDom(d){ var intro = d.lastChild; while(intro.nodeType!=1){ intro=intro.previousSibling; } return intro; } function showInfo(){ var picShow = document.getElementById("picShow"); var tagli= picShow.getElementsByTagName("li"); var child; for(var i=0;i<tagli.length;i++){ tagli[i].onmouseover=function(){ child=checkDom(this); child.style.display="block" } tagli[i].onmouseout=function(){ child=checkDom(this); child.style.display="none" } } } window.onload= function(){ showInfo(); } </script> </head> <body style="padding-top:50px;"> <ul id="picShow"> <li> <img src="http://www.uedspace.com/zuopin/images/0316.gif" width="136" height="101" alt="pic" /> <div class="intro">此处显示的摘要描述信息</div> </li> <li> <img src="http://www.uedspace.com/zuopin/images/0316.gif" width="136" height="101" alt="pic" /> <div class="intro">此处显示的摘2222描述信息</div> </li> </ul> </body> </html>

提示：你可以先修改部分代码再运行。

分类: javascript 标签:

本文的评论功能被关闭了.

jquery 实现的树型菜单焦点图循环切换效果

UEDspace