CSS :hover 樣式詳解

一、CSS :hover 動畫效果

CSS :hover 偽類是所有CSS偽類中最常用的一個，它可以讓元素在鼠標懸停時改變其樣式。通過結合其他CSS屬性和關鍵幀動畫，可以創建出許多有趣的觸發動畫效果。

例如：當鼠標懸停在一個按鈕上時，可以使按鈕背景色漸變或者添加動態陰影效果。下面是一個樣例：

.btn {
   padding: 10px 20px;
   border: none;
   background: linear-gradient(to bottom, white, #EEEEEE);
   cursor: pointer;
   animation: btnAnim 0.3s ease-in-out forwards;
}
 
.btn:hover {
   background: linear-gradient(to bottom, #EEEEEE, white);
   animation: none;
}
 
@keyframes btnAnim {
   from {
      box-shadow: none;
   }
   to {
      box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.4);
   }
}

二、CSS :hover 不生效

有時候，CSS :hover 樣式不會生效，這可能是由於以下原因：

1、CSS樣式權重不正確。當存在相同的樣式時，應該使用更具體的選擇器以確保 :hover 觸發樣式。例如：

button.btn:hover {
   background: #333;
}

2、HTML結構錯誤。如果HTML結構不正確，可能會導致CSS :hover 樣式不生效。例如：

<img src="example.png">
<span>Example Text</span>

正確的結構應該是：

<div>
   <img src="example.png">
   <span>Example Text</span>
</div>

三、CSS :hover 特效

CSS :hover 特效可以讓網站更加引人注目，提高用戶體驗。這裡，我們介紹兩個非常流行的特效：

1、手寫字體效果：

body {
   background: #000;
}
 
h1 {
   color: white;
   font-family: Arial;
   font-size: 64px;
   text-transform: uppercase;
   letter-spacing: 3px;
   position: relative;
}
 
h1:after {
   content: attr(data-text);
   position: absolute;
   top: 0;
   left: 0;
   padding: 5px;
   color: #1abc9c;
   background: #34495e;
   overflow: hidden;
   z-index: -1;
   transition: all 0.5s ease;
}
 
h1:hover:after {
   width: 100%;
   color: #fff;
}

2、環形進度條：

div {
   width: 100px;
   height: 100px;
   border-radius: 50%;
   background: #EEE;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
}
 
div:before,
div:after {
   content: "";
   position: absolute;
   width: 50px;
   height: 50px;
   border-radius: 50%;
   border: 4px solid transparent;
   border-top-color: #1abc9c;
}
 
div:before {
   animation: spin 2s linear infinite;
}
 
div:after {
   animation: progress 5s linear infinite;
   border-width: 6px;
   transform: rotate(120deg);
   animation-delay: -2s;
}
 
@keyframes spin {
   to {
      transform: rotate(360deg);
   }
}
 
@keyframes progress {
   0% {
      transform: rotate(-120deg);
   }
   100% {
      transform: rotate(240deg);
   }
}

四、CSS :hover 圖片放大

CSS :hover 可以用來創建圖片懸停放大的效果。下面是一段實現代碼：

img:hover {
   transform: scale(1.2);
   transition: all 0.5s ease;
}

五、CSS :hover 移齣動畫

移齣動畫可以在鼠標離開元素時添加過渡效果。下面是一個移出旋轉動畫的例子：

div {
   width: 100px;
   height: 100px;
   background: #1abc9c;
   transition: all 0.5s ease;
}
 
div:hover {
   transform: rotate(180deg);
}
 
div:hover:before {
   opacity: 1;
   transform: rotate(180deg);
}
 
div:before {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   background: #34495e;
   opacity: 0;
   transition: all 0.5s ease;
}

六、CSS :hover 用法

CSS :hover 非常靈活，可以用於任何元素，例如下面的一些例子：

1、改變鏈接的顏色：

a:hover {
   color: #1abc9c;
}

2、滑動看到隱藏的元素：

div.hidden {
   height: 0;
   opacity: 0;
   overflow: hidden;
   transition: all 0.5s ease;
}
 
div:hover .hidden {
   height: auto;
   opacity: 1;
}

3、改變按鈕的形狀：

button {
   padding: 10px 20px;
   border: none;
   border-radius: 20px;
   background: #1abc9c;
   color: white;
   transition: all 0.5s ease;
}
 
button:hover {
   border-radius: 50%;
   background: #2ecc71;
}

七、CSS 行內樣式:hover

通過將 :hover 偽類應用於HTML標籤的行內樣式，可以實現一些快速的效果。例如：

<p style="background: #1abc9c; color: white; padding: 10px;" 
   onMouseOver="this.style.backgroundColor='#2ecc71';" 
   onMouseOut="this.style.backgroundColor='#1abc9c';">
   Hover Me
</p>

八、hover 事件

通過JavaScript，可以在鼠標懸停時觸發事件。例如：

const elem = document.querySelector(".box");
 
elem.addEventListener("mouseover", () => {
   elem.style.transform = "scale(1.2)";
});
 
elem.addEventListener("mouseout", () => {
   elem.style.transform = "scale(1)";
});

九、 CSS :hover 理解

CSS :hover 是一種偽類選擇器，用於在鼠標懸停時改變元素的外觀。它是CSS中最常用的偽類之一，因為它可以輕鬆地在元素上創建交互式效果。 :hover 可以與其他CSS屬性結合使用，例如 transition 和 animation 以創建更複雜的效果。

十、 CSS :hover 控制其他元素

在CSS :hover 中，可以使用相鄰兄弟選擇器和子元素選擇器來控制其他元素的樣式。例如：

.btn:hover + .text {
   color: white;
}
 
.btn:hover ~ .text {
   color: #2ecc71;
}

以上就是關於 CSS :hover 的詳細解釋和用法示例。通過合理地應用 :hover，我們可以為網站增加更多交互性和用戶體驗。