目的:当鼠标移到目标元素时显示提示信息,当鼠标移开时提示信息隐藏。
首先,随便写个style:
<style>
#div1{ height:200px; width:200px; background:#ccc; display:none;
border:2px solid #900;}
</style>
然后写下相关html:
<input type="checkbox" οnmοuseοver="div1.style.display='block';"
οnmοuseοut="div1.style.display='none';" />
<div id=div1 >这样可以看到吗?</div>
这样,就能实现原定目标了。很简单。
但是,我们真正需要的并不是这样不规范的代码。在之前的火狐浏览器中,当鼠标移到复选框的时候我们根本看不到提示信息,因为火狐不能识别οnmοuseοver="div1.style.display='block';",不能执行更改block。当然随着浏览器的不断完善不断改进,刚才本女侠试了一下,在火狐居然也可以看到预期效果。好吧,但是我们不能降低对自身的要求。
最好是能把onmouseover系列写成function函数来管理。条理清晰,书写规范。以下为修改后的版本:
<!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=utf-8"
/>
<title>无标题文档</title>
<style>
#div1 { height:200px; width:200px; background:#ccc; display:none;
border:2px solid #900; color:#000;}
</style>
<script type="text/javascript">
function MouseOver(){
document.getElementById("div1").style.display="block";
}
function MouseOut(){
document.getElementById('div1').style.display="none";
}
</script>
<input type="checkbox" οnmοuseοver="MouseOver()" οnmοuseοut="MouseOut()" />
<div id="div1">这样可以看到吗?</div>
瞬间有种高端大气上档次的感觉。。。
除了提示框之外,还能做换肤处理。通过onclick来调用更换css或者背景的函数即可。