CSS - 悬停效果

CSS 悬停效果用于使交互式元素（如按钮和链接）对于浏览网页的用户而言更具动态感和吸引力。

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

悬停在我上面！

:hover 是一个工具，可以使交互式元素更具动态感和吸引力，而无需用户进行任何输入，只需移动鼠标即可。

什么是悬停伪类？

在 CSS 中，伪类 :hover 是一种选择器，用于在用户将鼠标指针移到元素上时定位和设置元素的样式。
悬停效果主要用于交互式元素（如按钮、链接等），为用户提供动态体验。
悬停效果有助于为网站添加动态和引人注目的外观。

CSS 背景颜色悬停效果

以下是如何在悬停时更改 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>
   <div class="main">
      <div class="container"> Hover over me! </div>
   </div>
</body>

</html>

带有悬停效果的 CSS 按钮

这是一个在悬停状态下设置按钮样式的示例。

示例

<!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: background-color 0.3s, color 0.3s;
        }
        button:hover {
            background-color: #228B22;
            color: #ffffff;
            transform: scale(1.2);
        }
    </style>
</head>

<body>
      <button> Hover me!!! </button>
</body>
</html>

带有悬停效果的 CSS 边框

这是一个显示边框在悬停时如何变化的示例。

示例

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            padding: 10px 20px;
            margin: 10px;
            background-color: #228B22;
            color: #ffffff;
            border: 2px solid #228B22;
            border-radius: 5px;
            text-decoration: none;
            font-size: 16px;
            font-weight: bold;
            transition: all 0.3s;
        }
        div:hover {
            border-radius: 20px;
        }
    </style>
</head>

<body>
      <div> Hover me!!! </div>
</body>

</html>

CSS 盒阴影悬停效果

这是一个示例，其中在悬停 div 时添加了盒阴影。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            padding: 10px 20px;
            margin: 10px;
            background-color: #228B22;
            color: #ffffff;
            border: 2px solid #228B22;
            border-radius: 5px;
            text-decoration: none;
            font-size: 16px;
            font-weight: bold;
            transition: all 0.3s;
        }
        div:hover {
            box-shadow: 20px 20px 10px 
                        grey;
        }
    </style>
</head>

<body>
    <div> Hover me!!! </div>
</body>

</html>

悬停时的 CSS 样式

这是一个示例，其中在悬停时为按钮添加了阴影效果。

示例

<!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>

打印页面