overflow应用：hover悬浮样式

最新推荐文章于 2024-06-24 09:37:32 发布

barkL

最新推荐文章于 2024-06-24 09:37:32 发布

阅读量537

点赞数

分类专栏： HTML 文章标签： html5 css

本文链接：https://blog.csdn.net/barkl/article/details/118670317

版权

本文探讨了如何使用CSS的hover伪类来创建鼠标悬浮时的元素样式变化，通过实例展示hover在网页设计中的应用。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			section {
				width: 800px;
				text-align: center;
				border: 10px solid #ffff7f;
			}
			.box{
				width: 200px;
				height: 300px;
				font-family: "仿宋";
				text-indent: 30px;			/* 文字缩进 */
				float: left;
				border-radius: 15px;
				overflow: hidden;			/* 对溢出内容进行隐藏 */
			}
			.box.b1{
				
				background-color: rgba(0, 0, 255, 0.2);			/* rgba前单个参数为三原色，最后一个是设置透明度 */
			}
			.box.b2{
				background-color: rgba(85, 255, 0, 0.2);
			}
			.box.b3{
				background-color: rgba(255, 170, 0, 0.2);
			}
			.box.b4{
				background-color: rgba(0, 255, 255, 0.2);
			}
			section:hover article{
				width: 50px;
				
			}
			section article:hover{
				width: 650px;
				overflow-y: auto;			/* 鼠标悬浮时y轴出现滚轴 */
			}
		</style>
	</head>
	<body>
		<section>
			<