event事件（跟随鼠标的提示框）小案例

最新推荐文章于 2022-09-29 22:25:38 发布

tingyueting

最新推荐文章于 2022-09-29 22:25:38 发布

阅读量427

点赞数

本文链接：https://blog.csdn.net/tingyueting/article/details/72876999

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>跟随鼠标的提示框</title>
<style type="text/css">
/**{
padding:0;
margin:0;
}*/
#box{
width:600px;
height:800px;
}
ol li{
width:416px;
height:40px;
margin-top:40px;
}
ol li a{
text-decoration: none;
width:100px;
height:40px;

}
li a:hover{
text-decoration: underline;
color:red;
}
#ti{
width:150px;
height:80px;
background:gold;
position:absolute;
display:none;
color:red;
font-weight:bolder;
}
</style>
<script type="text/javascript">
window.οnlοad=function(){
var _ti=document.getElementById("ti")
var _li=document.getElementsByTagName("li")
for(var i=0;i<_li.length;i++){
_li[i].οnclick=function(ev){
_ti.style.display="block"
var e=ev||window.event;
_ti.style.left=e.clientX+20+"px";
_ti.style.top=e.clientY+20+"px";
}
}
_ti.οnclick=function(){
_ti.style.display="none";
}
}
</script>
</head>
<body>
<div id="box">
<ol>
<li><a href="#">门前大桥下，游过一群鸭。快来快来数一数，二四六七八。</a></li>
<li><a href="#">门前大桥下，游过一群鸭。快来快来数一数，二四六七八。</a></li>
<li><a href="#">门前大桥下，游过一群鸭。快来快来数一数，二四六七八。</a></li>
<li><a href="#">门前大桥下，游过一群鸭。快来快来数一数，二四六七八。</a></li>
<li><a href="#">门前大桥下，游过一群鸭。快来快来数一数，二四六七八。</a></li>
</ol>
<div id="ti">总共有多少只鸭？？？？？</div>
</div>
</body>
</html>