原创

通过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),回复关键字领取资料:如HadoopDubboCAS源码等等,免费领取资料视频和项目。 

涵盖:程序人生、搞笑视频、算法与数据结构、黑客技术与网络安全、前端开发、Java、Python、Redis缓存、Spring源码、各大主流框架、Web开发、大数据技术、Storm、Hadoop、MapReduce、Spark、elasticsearch、单点登录统一认证、分布式框架、集群、安卓开发、iOS开发、C/C++、.NET、Linux、Mysql、Oracle、NoSQL非关系型数据库、运维等。

相关推荐

评论

分享:

支付宝

微信