【前端学习笔记 CSS系列十二】鼠标滑过出现边框

最新推荐文章于 2024-07-16 22:00:27 发布

GUANYX~

最新推荐文章于 2024-07-16 22:00:27 发布

阅读量825

点赞数

分类专栏：前端学习笔记文章标签：前端 css css3

本文链接：https://blog.csdn.net/gyx1549624673/article/details/122890961

版权

前端学习笔记专栏收录该内容

56 篇文章 0 订阅

订阅专栏

这篇博客通过HTML和CSS展示了如何在鼠标悬停时为<div>元素添加动态红色边框。利用CSS的伪元素`:hover::before`和`content`属性，配合`border`、`position`等样式实现这一视觉效果。适合前端开发者学习和参考。

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

一、效果

在这里插入图片描述

二、代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				width: 520px;
				height: 280px;
				margin: 100px auto;
				position: relative;
			}
			/* 鼠标经过之后，在前面插入一个伪元素 */
			div:hover::before {
				content: "";
				width: 100%;
				height: 100%;
				border: 10px solid red;
				display: block;
				/* 注意到伪元素属于行内元素，需要转换 */
				position: absolute; /* 子绝父相 */
				top: 0;
				left: 0;
				box-sizing: border-box; /* 防止加边框会扩大整个盒子 */
			} 
			
		</style>
	</head>
	<body>
		<div>
			<img src="img/2.jpg" />
		</div>
	</body>
</html>