Html 鼠标悬停时移开后依然保持hover状态，实现切换tab栏，不触发点击事件切换菜单

移动开发 2023-06-11 20:38:56 阅读次数: 0

在还原一个网站时有这个效果，下面用原生的h5+css+js 实现。

首先我们看这个例子，鼠标悬停时，校园对应的样式改变，并且通过把display设置为none 的div盒子从隐藏变为显示，但是当我想要鼠标移动离开后也能保持悬停，这里就需要操纵js.

最终效果请翻到最下面取。

 

鼠标离开后没了

 

废话不多说上代码：

原来的：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="control">
			
			<div class="school">校园
				<div class="school_news">
					校园信息
				</div>
			</div>
			
			<div class="message">公告
				<div class="message_news">
					公告信息
				</div>
			</div>
			
		</div>
	</body>
</html>
<style>
/* 让他水平排列，并且居中 */
.control{
	display: flex;
	justify-content: center;
}
/* 两个都给他初始宽度、高度、颜色、距离、居中样式（注意同时给样式要用 , 隔开） */
.school,.message{
	width: 100px;
	height: 26px;
	background-color: orange;
	margin-right: 20px;
	text-align: center;	
}
/* hover状态就是鼠标悬停以后的样式 */
.school:hover,.message:hover{
	background-color: orangered;
	color: white;
}
/* 设置为none就隐藏了 */
.school_news , .message_news{
	display: none;	
}
/* .school:hover .school_news的意思就是 当school这个属性鼠标悬停时 它所属的school_news 样式发生改变 */
/* 这里还是一样 逗号分隔，意思和前面的schoole一样， */
.school:hover .school_news , .message:hover .message_news{
	width: 100px;
	height: 200px;
	color: black;
	background-color: #F7F2E4;
	display: inline-block;
}
</style>

更改为js 操作后：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="control">
			
			<div id="school" class="school">校园
				<div id="school_news" class="school_news">
					校园信息
				</div>
			</div>
			
			<div id="message" class="message">公告
				<div id="message_news" class="message_news">
					公告信息
				</div>
			</div>
			
		</div>
	</body>
</html>
<script>
	// 特别声明：因为这里用JS的 onmouseout  onmouseover 来判断有没有悬停 ，所以下面样式和hover相关的就废除
	window.onload = function() {
		// 根据ID 获取元素的操作对象
		var school = document.getElementById('school')
		var school_news = document.getElementById('school_news')
		var message = document.getElementById('message')
		var message_news = document.getElementById('message_news')
		
		// 初始化显示 页面一打开就显示校园的
		school.setAttribute("style", "background-color: orangered;color: white;")
		school_news.style.display = 'block'
		
		// 如果鼠标碰到了公告 （鼠标悬停时onmouseover 和悬停离开后onmouseout的方法）
		message.onmouseout = message.onmouseover = function() {
			// 恢复学校原始样式
			school.setAttribute("style", "background-color: orange;")
			school_news.style.display = 'none';
			// 设置公告
			message.setAttribute("style", "background-color: orangered;color: white;")
			message_news.style.display = 'block';		
		}
		
		// 如果鼠标碰到了校园
		school.onmouseout = school.onmouseover = function() {
			// 恢复公告原始样式
			message.setAttribute("style", "background-color: orange;")
			message_news.style.display = 'none';
			// 设置校园
			school.setAttribute("style", "background-color: orangered;color: white;")
			school_news.style.display = 'block';		
		}
		
		

	}
</script>
<style>

/* 让他水平排列，并且居中 */
.control{
	display: flex;
	justify-content: center;
}
/* 两个都给他初始宽度、高度、颜色、距离、居中样式（注意同时给样式要用 , 隔开） */
.school,.message{
	width: 100px;
	height: 26px;
	background-color: orange;
	margin-right: 20px;
	text-align: center;	
}
/* hover状态就是鼠标悬停以后的样式 */
/* .school:hover,.message:hover{
	background-color: orangered;
	color: white;
} */
/* 设置为none就隐藏了 */
.school_news , .message_news{
	width: 100px;
	height: 200px;
	color: black;
	background-color: #F7F2E4;
	display: none;	
}
/* .school:hover .school_news的意思就是 当school这个属性鼠标悬停时 它所属的school_news 样式发生改变 */
/* 这里还是一样 逗号分隔，意思和前面的schoole一样， */
/* .school:hover .school_news , .message:hover .message_news{
	width: 100px;
	height: 200px;
	color: black;
	background-color: #F7F2E4;
	display: inline-block;
} */
</style>

最终写个demo完整：

效果图：鼠标离开依旧显示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

		<div id="把这个div 放到你想放的地方">
			<!-- 控制 -->
			<div class="control">
				<div id="school" class="school">校园新闻</div>
				<div id="message" class="message">公告信息</div>
			</div>
			<!-- 显示 -->
			<div id="message_news" class="message_news">
				<ul>
					<li><a href="#">校园链接一测试--123123</a><a>2022.11.28</a></li>
					<li><a href="#">校园链接二--123123</a><a>2022.11.27</a></li>
					<li><a href="#">校园链接三--123123</a><a>2022.11.25</a></li>
				</ul>
			</div>
			<div id="school_news" class="school_news">
				<ul>
					<li><a href="#">链接一-99</a><a>2022.11.27</a></li>
					<li><a href="#">链接二公告比较长一点的666-99</a><a>2022.11.26</a></li>
					<li><a href="#">链接三公告-99</a><a>2022.11.25</a></li>
					<li><a href="#">链接4公告-99</a><a>2022.11.24</a></li>
					<li><a href="#">链接5公告-99</a><a>2022.11.23</a></li>
				</ul>
			</div>
		</div>

	</body>
</html>
<script>
	// 特别声明：因为这里用JS的 onmouseout  onmouseover 来判断有没有悬停 ，所以下面样式和hover相关的就废除
	window.onload = function() {
		// 根据ID 获取元素的操作对象
		var school = document.getElementById('school')
		var school_news = document.getElementById('school_news')
		var message = document.getElementById('message')
		var message_news = document.getElementById('message_news')

		// 初始化显示 页面一打开就显示校园的
		school.setAttribute("style", "background-color: orangered;color: white;")
		school_news.style.display = 'block'

		// 如果鼠标碰到了公告 （鼠标悬停时onmouseover 和悬停离开后onmouseout的方法）
		message.onmouseout = message.onmouseover = function() {
			// 恢复学校原始样式
			school.setAttribute("style", "background-color: orange;")
			school_news.style.display = 'none';
			// 设置公告
			message.setAttribute("style", "background-color: orangered;color: white;font-weight: 800;")
			message_news.style.display = 'block';
		}

		// 如果鼠标碰到了校园
		school.onmouseout = school.onmouseover = function() {
			// 恢复公告原始样式
			message.setAttribute("style", "background-color: orange;")
			message_news.style.display = 'none';
			// 设置校园
			school.setAttribute("style", "background-color: orangered;color: white;font-weight: 800;")
			school_news.style.display = 'block';
		}



	}
</script>
<style>
	body {
		font-family: Arial, Helvetica, sans-serif, "新宋体";
	}

	.control {
		display: flex;
	}

	/* 两个都给他初始宽度、高度、颜色、距离、居中样式（注意同时给样式要用 , 隔开） */
	.school,
	.message {
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
		width: 70px;
		height: 24px;
		color: white;
		line-height: 24px;
		font-size: 12px;
		background-color: orange;
		margin-right: 5px;
		text-align: center;
	}

	/* 设置为none就隐藏了 */
	.school_news,
	.message_news {
		width: 388px;
		min-height: 100px;
		margin-top: 3px;
		border-top: 1px solid #b4b4b4;
		;
		display: none;
	}

	/* 列表样式 */
	.message_news ul,
	.school_news ul {
		margin: 5px 10px;
		padding: 0;
	}

	/* 	标题和时间的间隔样式 */
	.message_news ul li,
	.school_news ul li {
		display: flex;
		justify-content: space-between;
		margin-top: 8px;
	}

	/* 链接样式 */
	.message_news ul li a,
	.school_news ul li a {
		font-size: 12px;
		color: #515151;
		text-decoration: none;
	}
</style>

猜你喜欢

转载自blog.csdn.net/weixin_50656154/article/details/128080591
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
Java基础复习_day13_Collection集合
2018.11.16 c语言学习经验
且看Java内置四大核心函数式接口
小程序云开发中数据库的数据分段和显示图片
python的函数
Web-JS进阶
【干货】C++常用代码积累笔记大全
Spring的ioc操作 与 IOC底层原理
构建之法20191121-11 Scrum立会报告+燃尽图 07
Spring boot之Hello World访问404
每日归档
更多
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022