原创

通过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),回复关键词领取资料:如Mysql、Hadoop、Dubbo、Spring Boot等,免费领取视频教程、资料文档和项目源码。

Java精选专注程序员推送一些Java开发知识,包括基础知识、各大流行框架(Mybatis、Spring、Spring Boot等)、大数据技术(Storm、Hadoop、MapReduce、Spark等)、数据库(Mysql、Oracle、NoSQL等)、算法与数据结构、面试专题、面试技巧经验、职业规划以及优质开源项目等。其中一部分由小编总结整理,另一部分来源于网络上优质资源,希望对大家的学习和工作有所帮助。

评论

分享:

支付宝

微信