《鼠标事件【onmouser】及Div的显示与隐藏》

最新推荐文章于 2022-02-23 21:20:08 发布

卡布奇诺奶茶的独特

最新推荐文章于 2022-02-23 21:20:08 发布

阅读量530

点赞数

CC 4.0 BY-SA版权

分类专栏： Web小技能文章标签： web前端 html web 鼠标

本文链接：https://blog.youkuaiyun.com/qq_35119220/article/details/66968319

Web小技能专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何利用HTML和JavaScript实现网页上的鼠标事件，特别是`onmouseover`和`onmouseout`，来控制Div元素的显示与隐藏。通过这种方式，可以创建交互式的分类导航栏。文章提供了初步实现的示例，并邀请读者参与后期内容的完善。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

概述：

此文件可以初步实现网站中分类导航栏并以鼠标切换内容，后期内容的添加完善，需要您的参与，谢谢。

Web截图：

代码详情：

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="卡布奇诺奶茶的独特">
  <meta name="Keywords" content="鼠标事件，onmouseover，div的显示与隐藏">
  <meta name="Description" content="此文件可以初步实现网站中分类导航栏并以鼠标切换内容，后期内容的添加完善，需要您的参与，谢谢。">
  <title>鼠标事件【onmouser】及Div的显示与隐藏</title>
	<style type="text/css">
		/*
		 *controler选择器中div的样式属性
		 */
		.con{
			width:60px;
			height:25px;
			border:1px solid #CCCCCC;
			float:left;
		}
		/*
		 *辅助背景样式auxiliary
		 */
		.auxiliary{
			width:60px;
			height:25px;
			border:1px solid #CCCCCC;
			float:left;
			background:#F2F2F2;
		}
		/*
		 *screen选择器中div的样式属性
		 */
		.first{
			background:#F0F8FF;
		}
		.second{
			display:none;
			background:#BDB76B;
		}
		.third{
			display:none;
			background:#FF7F50;
		}
		.unified{
			width:310px;
			height:120px;
			border:1px solid #CCCCCC;
		}
		#screen{
			clear:left;
		}
	</style>
	<script type="text/javascript" language="javascript">
		/*
		 *screen选择器中div的显示与隐藏
		 */
		function show(num){
			//声明获取类名为unified的div的长度
			var unlen = document.getElementsByClassName("unified").length;
			//for循环，起始i=1,其目的是让类名为first的div第一默认显示
			for(var i=1;i<=unlen;i++){
				document.getElementById("scr"+i).style.display = "none";
			}
				document.getElementById("scr"+num).style.display = "block";
		}
		/*
		 *controler选择器中div的蒙版效果
		 */
		window.onload = function(){
			//声明查询相关选择器container【注：在它的前面要加一个“#”符号】
			var selector = document.querySelector("#controler");
			//为其赋予onmouseover鼠标事件
			selector.onmouseover = function(e){
				//声明创建target跳转元素
				var target = e.target || e.srcElement;
				Array.prototype.slice.call(this.children).forEach(function(value){
					value.className = "con";
				});
					//跳转至辅助背景样式
					target.className = "auxiliary";
			}
		}
	</script>
 </head>
 <body>
	<!--ele start-->
	<div id="container">
		<!--ele start-->
		<div id="controler">
			<div class="con auxiliary" onmouseover="show(1)">1</div>
			<div class="con" onmouseover="show(2)">2</div>
			<div class="con" onmouseover="show(3)">3</div>
		</div>
		<!--ele end-->
		<div id="screen">
			<!--这里的class类选择器采用【样式叠加】的方式进行效果修饰-->
			<div id="scr1" class="unified first">4</div>
			<div id="scr2" class="unified second">5</div>
			<div id="scr3" class="unified third">6</div>
		</div>
	</div>
	<!--ele end-->
 </body>
</html>

-----------------------------------------

吐舌头感谢您的倾心阅读