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>

列印頁面