鼠标移动实现html页面的显示已经隐藏效果,具体实现参考本文,希望对大家有帮助。
简单的html页面,代码如下:
<!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> .shmsg{width:100px;height:100px;display:none;position:absolute;left:0;top:15px;z-inde:5;} </style> </head> <body> <div onmouseover="messageOver(this)" onmouseout="messageOut(this)" style="width:100px;position:relative;">欢迎关注本网站 <div class="shmsg"><p><a href="#">ssss</a></p><p><a href="www.yoodb.com">www.yoodb.com</a></p></div> </div> </body> </html>
js实现方法,代码如下:
<script> function messageOver(obj) { var msg = obj.getElementsByTagName("div")[0]; msg.style.display = "block"; msg.style.backgroundColor = "#f60"; } function messageOut(obj) { var msg = msg.getElementsByTagName("div")[0]; msg.style.display = "none"; } </script>
最简单的书写方式,通过jquery实现隐藏及显示,具体代码如下:
<!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> .shmsg{width:100px;height:100px;display:none;position:absolute;left:0;top:15px;z-inde:5;} </style> </head> <body> <div onmouseover="$('.shmsg').show()" onmouseout="$('.shmsg').hide()" style="width:100px;position:relative;">欢迎关注本网站 <div class="shmsg"><p><a href="#">ssss</a></p><p><a href="www.yoodb.com">www.yoodb.com</a></p></div> </div> </body> </html>