简明现代魔法 -> JavaScript -> 鼠标移过时显示提示信息

鼠标移过时显示提示信息

2011-03-04

有时候为了简洁设计,当用户鼠标未经过时,我们不用向用户显示操作提示。直到用户鼠标经过了,就显示相应的操作提示。这种设计在很多地方都用得上。先看看下面的演示。

效果演示

javascript code 如下:

<script type="text/javascript">
<!--
var Ptr = document.getElementById("tab").getElementsByTagName("li");
function $() 
{
	for (i=1;i<Ptr.length+1;i++) 
	{ 
      	Ptr[i-1].className = (i%2>0)?"t1":"t2";
  	}
}
//window.onload=$;
for(var i=0;i<Ptr.length;i++)
{
	var msg = document.createElement("span");
	Ptr[i].onmouseover = function(){
		this.tmpClass=this.className;
      	this.className = "t3";    
		//var msg = document.createElement("span");
		this.appendChild(msg);
		msg.innerHTML = "添加信息";
		msg.style.cssFloat = "right";
	};
	//Ptr[i].children.html = '<span>hello</span>';
    
	Ptr[i].onmouseout=function(){
      	this.className=this.tmpClass;
		//var msg = document.createElement("span");
		this.removeChild(msg);
	};
}
//-->
</script>

不知道你有没有发现,当鼠标移动到“添加信息”的时候,li处于未选中了状态,并且在IE上有些问题。下面的处理方式可能会更好,先看演示:

嗯,这样子就好多了。

随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们