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

最新推荐文章于 2024-09-14 08:13:21 发布

Beblien

最新推荐文章于 2024-09-14 08:13:21 发布

阅读量3.8k

点赞数 3

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/weixin_50656154/article/details/128080591

版权

本文介绍了如何使用HTML、CSS和JavaScript在鼠标悬停后保持hover状态，以此来实现切换tab栏的功能，同时避免点击事件触发菜单切换。通过JS操作，即使鼠标移开，仍能保持悬停效果。

摘要由CSDN通过智能技术生成

在还原一个网站时有这个效果，下面用原生的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;