原创

通过js实现鼠标移动隐藏显示效果

鼠标移动实现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>
~阅读全文-人机检测~

微信公众号“Java精选”(w_z90110),专注Java技术干货分享!让你从此路人变大神!回复关键词领取资料:如Mysql、Hadoop、Dubbo、Spring Boot等,免费领取视频教程、资料文档和项目源码。微信搜索小程序“Java精选面试题”,内涵3000+道Java面试题!

涵盖:互联网那些事、算法与数据结构、SpringMVC、Spring boot、Spring Cloud、ElasticSearch、Linux、Mysql、Oracle等

评论

分享:

支付宝

微信