移动鼠标进行菜单选择高亮选中项

最新推荐文章于 2023-08-28 16:38:54 发布

jasmyn518

最新推荐文章于 2023-08-28 16:38:54 发布

阅读量599

点赞数

分类专栏：笔记 HTML JavaScript 文章标签： html javascript 前端

本文链接：https://blog.csdn.net/jasmyn518/article/details/121866358

版权

笔记同时被 3 个专栏收录

127 篇文章 4 订阅

订阅专栏

HTML

78 篇文章 2 订阅

订阅专栏

JavaScript

10 篇文章 0 订阅

订阅专栏

这篇博客展示了如何使用JavaScript实现网页菜单项的高亮效果。当鼠标悬停在一级菜单或二级菜单上时，相应的菜单项会变为红色高亮。通过添加和移除‘show’类来控制样式变化，代码简洁易懂，适用于网页交互设计中的导航菜单优化。

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

大部分网站的菜单栏会有二级菜单之类的，在选择一级菜单时，鼠标悬停的菜单高亮，显示不同的颜色，选中一级菜单之后显示出相应的二级菜单，当鼠标悬停到二级菜单时，二级菜单高亮的同时，相应的一级菜单也要进行高亮。
具体的实现代码如下，菜单项内容用1，2，3，4，5，6表示：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		ul{
			list-style: none;
		}
		#title1>li{
			width: 100px;
			height: 30px;
		}
		.show{
			color: red;
		}
	</style>
</head>
<body>
	<ul id="title1">
		<li>1</li>
		<li>2
			<ul>
				<li>22</li>
				<li>22</li>
				<li>22</li>
			</ul>
		</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
	</ul>
</body>
<script type="text/javascript">
	onload()
	function onload(){
		var li=document.getElementById("title1").getElementsByTagName("li");
		for (var i=0; i<li.length;i++) {
			li[i].onmousemove=function(){
				this.className="show";
			}
			li[i].onmouseout=function(){
				this.className="";
			}
		}

	}
</script>
</html>

有问题可以评论交流。

jasmyn518

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
移动鼠标进行菜单选择高亮选中项

大部分网站的菜单栏会有二级菜单之类的，在选择一级菜单时，鼠标悬停的菜单高亮，显示不同的颜色，选中一级菜单之后显示出相应的二级菜单，当鼠标悬停到二级菜单时，二级菜单高亮的同时，相应的一级菜单也要进行高亮。具体的实现代码如下，菜单项内容用1，2，3，4，5，6表示：<!DOCTYPE html><html><head> <title></title> <style type="text/css"> ul{ list-s
复制链接

扫一扫