hover伪元素的简单使用

最新推荐文章于 2024-04-19 15:57:51 发布

qq_28097119

最新推荐文章于 2024-04-19 15:57:51 发布

阅读量565

点赞数 1

文章标签： css html css3

本文链接：https://blog.csdn.net/qq_28097119/article/details/109603334

版权

这篇博客探讨了如何在CSS布局中利用hover伪类来创建下拉标签。内容包括具体的代码实现和注意事项，强调了hover元素的子元素在鼠标悬停时应保持可见。

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

css布局中使用hover实现下拉标签
本文档主要介绍使用hover伪类实现下拉框的实现

代码

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		.container {
			width: 800px;
			margin: 0px auto;
			font-size: 0px;
		}
		
		.cdiv {
			color: #FFFFFF;
			cursor: pointer;
			padding: 15px;
			text-align: center;
			font-size: 16px;
			display: inline-block;
			background: black;
		}
		
		.p2:hover ul {
			left: 225px;
			display: inline-block;
		}
		
		.list_1 {
			position: absolute;
			font-size: 12px;
			list-style-type: none;
			display: none;
			top: 47px;
		}
		
		li {
			background: yellowgreen;
			padding: 5px 16px;
		}
		
		li:hover {
			color: red;
		}
	</style>
</head>

<body>
	<div class="container">
		<div class="cdiv p1">首页</div>
		<div clas

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qq_28097119

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
hover伪元素的简单使用

css布局中使用hover实现下拉标签本文档主要介绍使用hover伪类实现下拉框的实现代码<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> .container { width: 8
复制链接

扫一扫