Div鼠标移动效果

最新推荐文章于 2025-03-28 16:26:06 发布

原创最新推荐文章于 2025-03-28 16:26:06 发布 · 469 阅读

0 ·

CC 4.0 BY-SA版权

本文通过具体的HTML和CSS代码实例展示了如何为页面元素设置统一的样式，并实现鼠标悬停时元素边框颜色的变化效果。文章重点介绍了如何使用CSS选择器和伪类来实现这一交互细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

模仿效果

<img src="https://img-blog.youkuaiyun.com/20140927193443849?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQva2VpdGhx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title></title>
		<style>
			div {width: 100px; float: left;

<span style="white-space:pre">				</span>border: 1px solid red;line-height: 30px;

<span style="white-space:pre">				</span>text-align: center;cursor: default}
			div:hover{border: 1px solid blue;<span style="color: rgb(117, 224, 242); font-family: Consolas; font-size: 15px; "><em>border-bottom</em></span><span style="font-family: Consolas; font-size: 15px; color: rgb(249, 249, 245);">: </span><span style="color: rgb(117, 224, 242); font-family: Consolas; font-size: 15px;">none</span><span style="font-family: Consolas; font-size: 15px; color: rgb(249, 249, 245);">;</span><span style="color: rgb(117, 224, 242); font-family: Arial, Helvetica, sans-serif;">}</span>
		</style>
	</head>
		<div class="">
			aaaa
		</div>
		<div class="">
			aaaa
		</div>
		<div class="">
			aaaa
		</div>
		<div class="">
			aaaa
		</div>
		<div class="">
			aaaa
		</div>
	<body>

	</body>

</html>