CSS - :hover（悬停）

CSS 中的 :hover 伪类用于在用户使用鼠标光标将鼠标悬停在元素上时将其定向。其目的是应用样式或触发特定行为，以增强用户体验或提供额外的视觉反馈。

：hover 是一种工具，可以使交互式元素更加动态和吸引人，而无需除了移动鼠标之外的任何用户输入。

适用于

HTML 元素，例如按钮、链接、图像等。

DOM 语法


:hover {
	 	/* ... */
}

CSS ：hover - 具有 background-color 属性

以下是更改链接背景颜色的示例：


<html>
<head>
<style>
	 	div {
	 	 	 padding: 1rem;
	 	}
	 	a {
	 	 	 background-color: rgb(238, 135, 9);
	 	 	 font-size: 1rem;
	 	 	 padding: 5px;
	 	}
	 	a:hover {
	 	 	 background-color: rgb(235, 235, 169);
	 	}
</style>
</head>
<body>
	 	<div>
	 	 	 <h3>Hover example - link</h3>
	 	 	 <a href="#">Hover over to see the color change!!!</a>
	 	</div>
</body>
</html>

CSS ：hover - 带按钮效果

以下是更改按钮背景颜色的示例：


<html>
<head>
<style>
	 	div {
	 	 	 padding: 1rem;
	 	}
	 	button {
	 	 	 background-color: greenyellow;
	 	 	 font-size: large;
	 	}
	 	button:hover {
	 	 	 background-color: gold;
	 	}
</style>
</head>
<body>
	 	 	 <h3>Hover example - button</h3>
	 	 	 <button>Hover me!!!</button>
	 	</div>
</body>
</html>

CSS ：hover - 具有边框效果

下面是一个示例，其中链接的边界在悬停时发生变化：


<html>
<head>
<style>
	 	.link {
	 	 	 color: blue;
	 	 	 text-transform: uppercase;
	 	 	 padding: 20px;
	 	 	 border: 4px solid blue;
	 	 	 border-radius: 10px;
	 	 	 display: inline-block;
	 	}
	 	.link:hover {
	 	 	 color: #494949;
	 	 	 border-radius: 45px;
	 	 	 border-color: #494949;
	 	}
</style>
</head>
<body>
	 	<h3>Hover effect on border of the link</h3>
	 	<div class="button"><a class="link" href="#">Check my borders on hover</a></div>
</body>
</html>

CSS ：hover - 带 box-shadow

下面是一个示例，其中 box-shadow 在悬停时添加到链接中：


<html>
<head>
<style>
	 	a {
	 	 	 font-size: 2rem;
	 	 	 color: #071402;
	 	 	 margin: 0 .25rem;
	 	 	 padding: 0 .25rem;
	 	 	 transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
	 	}
	 	a:hover {
	 	 	 box-shadow: inset 100px 0 0 100px #9ce2cc;
	 	 	 color: rgb(240, 32, 32);
	 	}
</style>
</head>
<body>
	 	<div>
	 	 	 <a href="#">Hover over me!!</a>
	 	</div>
</body>
</html>

CSS ：hover - 有背景效果

下面是一个示例，其中背景在悬停时在链接上增长：


<html>
<head>
<style>
	 	a {
	 	 	 text-decoration-line: underline;
	 	 	 color: #18272F;
	 	 	 font-size: 2rem;
	 	 	 position: relative;
	 	}
	 	a::before {
	 	 	 content: '';
	 	 	 background-color: rgba(118, 213, 83, 0.75);
	 	 	 font-size: 2rem;
	 	 	 position: absolute;
	 	 	 left: 0;
	 	 	 bottom: 3px;
	 	 	 width: 100%;
	 	 	 height: 10px;
	 	 	 z-index: -1;
	 	 	 transition: all .5s ease-in-out;
	 	}
	 	a:hover::before {
	 	 	 bottom: 0;
	 	 	 height: 100%;
	 	}
</style>
</head>
<body>
	 	<div>
	 	 	 <a href="#">Hover over me!!</a>
	 	</div>
</body>
</html>

CSS ：hover - 彩虹色效果

下面是一个示例，其中链接的下划线在悬停时提供彩虹色效果：


<html>
<head>
<style>
	 	a {
	 	 	 color: black;
	 	 	 text-decoration: none;
	 	 	 }
	 	a {
	 	 	 background:
	 	 	 linear-gradient(
	 	 	 to right,
	 	 	 rgb(179, 232, 168),
	 	 	 rgb(185, 162, 215)
	 	 	 ),
	 	 	 linear-gradient(
	 	 	 to right,
	 	 	 rgba(255, 0, 0, 1),
	 	 	 rgba(255, 0, 180, 1),
	 	 	 rgba(0, 200, 50, 1)
	 	 	 );
	 	 	 background-size: 100% 5px, 0 5px;
	 	 	 background-position: 100% 100%, 0 100%;
	 	 	 background-repeat: no-repeat;
	 	 	 transition: background-size 700ms;
	 	}
	 	a:hover {
	 	 	 background-size: 0 5px, 100% 5px;
	 	}
	 	body {
	 	 	 display: grid;
	 	 	 font-family: Verdana, Geneva, Tahoma, sans-serif;
	 	 	 font-size: 2rem;
	 	 	 height: 100vh;
	 	}
</style>
</head>
<body>
	 	<div>
	 	 	 <a href="#">Hover over me!!</a>
	 	</div>
</body>
</html>

CSS ：hover - 阴影效果

下面是一个示例，其中在悬停时为按钮提供阴影效果：


<html>
<head>
<style>
	 	body {
	 	 	 width: 100%;
	 	 	 height: 100vh;
	 	 	 display: grid;
	 	 	 justify-content: center;
	 	 	 align-items: center;
	 	}
	 	.glow {
	 	 	 padding: 10px;
	 	 	 width: 250px;
	 	 	 height: 50px;
	 	 	 border: none;
	 	 	 outline: none;
	 	 	 color: #fff;
	 	 	 background: #111;
	 	 	 cursor: pointer;
	 	 	 position: relative;
	 	 	 z-index: 0;
	 	 	 border-radius: 20px;
	 	}
	 	.glow:before {
	 	 	 content: '';
	 	 	 background: linear-gradient(60deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
	 	 	 position: absolute;
	 	 	 top: -4px;
	 	 	 left:-4px;
	 	 	 background-size: 400%;
	 	 	 z-index: -1;
	 	 	 filter: blur(15px);
	 	 	 width: calc(100% + 6px);
	 	 	 height: calc(100% + 6px);
	 	 	 animation: glowing 20s linear infinite;
	 	 	 opacity: 0;
	 	 	 transition: opacity .3s ease-in-out;
	 	 	 border-radius: 10px;
	 	}
	 	.glow:active {
	 	 	 color: rgb(246, 235, 235)
	 	}
	 	.glow:active:after {
	 	 	 background: transparent;
	 	}
	 	.glow:hover:before {
	 	 	 opacity: 1;
	 	}
	 	.glow:after {
	 	 	 z-index: -1;
	 	 	 content: '';
	 	 	 position: absolute;
	 	 	 width: 100%;
	 	 	 height: 100%;
	 	 	 background: #111;
	 	 	 left: 0;
	 	 	 top: 0;
	 	 	 border-radius: 10px;
	 	}
	 	@keyframes glowing {
	 	 	 0% { background-position: 0 0; }
	 	 	 50% { background-position: 400% 0; }
	 	 	 100% { background-position: 0 0; }
	 	}
</style>
</head>
<body>
	 	<button class="glow" type="button">HOVER OVER & CLICK!</button>
</body>
</html>

打印本页