CSS - 悬停效果
CSS 悬停效果用于使按钮和链接等交互元素更加生动互动。CSS 中的 :hover 伪类用于在用户将鼠标指针悬停在元素上时选中该元素。其目的是应用样式以提升用户体验。
:hover 属性可用于各种场景，例如悬停时更改按钮颜色、调整 div 框的大小，或显示隐藏内容。
将鼠标悬停在我身上！
什么是 Hover 伪类？
- 在 CSS 中，:hover 伪类是一种选择器，用于在用户将鼠标指针移动到元素上方时选中并样式化该元素。
- 悬停效果主要用于按钮、链接等交互元素，为用户提供动态体验。
- 悬停效果有助于为网站增添动态且吸引人的外观。
CSS 悬停时更改背景
你可以使用 :hover 属性在悬停时更改任何元素的背景。
示例
在本示例中，我们使用 background-color 属性结合 :hover 伪类，在悬停 div 容器时更改其背景颜色。
<!DOCTYPE html>
<html>
<head>
<style>
.main{
display: flex;
justify-content: space-around;
}
.container{
width: 40%;
height: 100px;
background-color: #D5E8D4;
border: 2px solid black;
padding: 10px;
justify-content: center;
align-items: center;
display: flex;
}
.container:hover{
background-color: #33FF33;
}
</style>
</head>
<body>
<h2>CSS :hover 伪类</h2>
<div class="main">
<div class="container"> 将鼠标悬停在我身上！ </div>
</div>
</body>
</html>
使用 CSS 悬停显示隐藏文本
要使用 CSS 显示任何隐藏文本或内容，可以使用 :hover 伪类。以下是一个在悬停时显示隐藏文本的示例。
示例
在本示例中，我们使用 opacity 属性结合 :hover 伪类，在悬停 div 元素时显示隐藏文本。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 200px;
height: 30px;
padding: 10px 20px;
margin: 10px;
font-size: 16px;
font-weight: bold;
border: 2px solid #04af2f;
border-radius: 10px;
text-align: center;
line-height: 30px;
}
.hide {
opacity: 0;
transition: opacity 0.3s;
}
.container:hover .hide {
opacity: 1;
}
</style>
</head>
<body>
<h2>CSS :hover 伪类</h2>
<p><strong>将鼠标悬停在下面的框上，即可显示其中的隐藏消息。</strong></p>
<div class="container">
<div class="hide">愚人节 :) </div>
</div>
</body>
</html>
CSS 按钮悬停缩放效果
你可以通过鼠标悬停在按钮上为其添加样式，从而使网页更加互动。你可以在悬停按钮时为其添加 transformation 属性、transition、animation 等多种效果。
示例
在这个示例中，我们为按钮使用了 text-transform 属性，并在悬停时使用 scale() function 来缩放按钮的大小。
<!DOCTYPE html>
<html>
<head>
<style>
button {
padding: 10px 20px;
margin: 10px;
background-color: #ffffff;
color: #228B22;
border: 2px solid #228B22;
border-radius: 5px;
text-decoration: none;
font-size: 16px;
font-weight: bold;
transition: transform 0.3s;
}
button:hover {
transform: scale(1.2);
}
</style>
</head>
<body>
<h2>CSS :hover pseudo class</h2>
<button>Hover over me!</button>
</body>
</html>
CSS 带悬停效果的边框
要为边框设置悬停效果，我们使用 border 属性结合 :hover 属性。你可以设置边框的 color、width、style 和 radius 等属性。
示例
在这个示例中，我们在悬停 div 元素时为其添加了边框。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: fit-content;
padding: 10px 20px;
margin: 10px;
font-size: 16px;
font-weight: bold;
transition: border 0.1s, border-radius 0.1s;
}
div:hover {
border: 2px solid #228B22;
border-radius: 10px;
}
</style>
</head>
<body>
<h2>CSS :hover pseudo class</h2>
<div> Hover me!!! </div>
</body>
</html>
CSS 带盒阴影的悬停效果
你可以在悬停 HTML 元素时为其添加阴影。这里是一个为 div 元素添加阴影的示例。
示例
以下示例使用 box-shadow 属性结合 :hover 属性，在悬停 div 盒子时为其添加阴影。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: fit-content;
padding: 10px 20px;
margin: 10px;
font-size: 16px;
font-weight: bold;
transition: box-shadow 0.1s;
border: 2px solid #228B22;
border-radius: 10px;
}
div:hover {
box-shadow: 20px 20px 10px grey;
}
</style>
</head>
<body>
<h2>CSS :hover pseudo class</h2>
<div> Hover me!!! </div>
</body>
</html>
CSS 悬停发光效果
你可以使用 CSS 属性如 linear-gradient、background-color、animation 等为 HTML 元素添加发光效果。下面是一个为按钮添加发光效果的示例。
示例
在这个示例中，我们使用了 :hover 属性结合 linear-gradient 函数，在鼠标悬停按钮时为其添加发光效果。
<!DOCTYPE html>
<html>
<head>
<style>
body {
height: 300px;
overflow: hidden;
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>