HTML基础知识(十一)

最新推荐文章于 2022-05-04 18:32:59 发布

楚玉大王就是我

最新推荐文章于 2022-05-04 18:32:59 发布

阅读量163

点赞数

分类专栏： HTML学习笔记前端学习文章标签： ntml基础知识 hover详解

本文链接：https://blog.csdn.net/weixin_45586581/article/details/102692054

版权

本文介绍了HTML中:hover伪类的应用，包括鼠标滑过元素自身及其子集时的样式改变，以及如何实现二级菜单效果。同时讲解了链接标签的样式控制，如去除下划线和设置字体样式。此外，还提及了CSS的display属性及其作用。

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

一、鼠标要划过的元素:hover{鼠标滑过瞬间该元素的样式}
例子：

  //<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style>
		*{ margin:0;padding: 0;}
		li{list-style: none;font-size: 22px;}
		.nav2{ margin_top:50px;}
		.nav{ background:black;}
		.nav li{float: left;width: 120px;height: 50px;margin-left: 5px;color:red;text-align: center;line-height: 50px;}
		.nav li:hover{background: orange;color: yellow;}
		a{color: #FFFFFF;text-decoration: none;}
		.nav li:hover a{color: blueviolet;}
	</style>
</head>
<body>
	<ul class="nav">
		<li style="background: orange;">
			<a href="http://www.baidu.com">首页</a>
		</li>
		<li>资讯</li>
		<li>产品</li>
		<li>新闻</li>
		<div style="clear: both;"></div>
	</ul>
</body>

二、鼠标滑过一个元素的时候改另一个元素的样式：
1、鼠标要划过的元素:hover 要