嗨各位，又來到鐵人賽第7天拉，我自己暑假在練習的時候遇到了一個問題，就是該如何讓滑鼠滑過就能顯示出你想要的東西，或者是改變外型顏色等，然後上網爬了文就找到了:hover，還有許多跟他一樣被稱為偽類的，那偽類是甚麼呢，我就不廢話開始介紹。

偽類

偽類用於選擇元素的特定狀態或行為，例如滑鼠懸停在連結上或元素的選中狀態。它們以冒號（:）開頭，並添加到選擇器的末尾。以下是一些常見的偽類：

• :hover:當鼠標懸停在元素上時應用樣式。
• :active:當元素被點擊時應用樣式。
• :focus:當元素獲得焦點時應用樣式（通常用於表單元素）。
• :first-child:選擇元素的第一個子元素。
• :last-child:選擇元素的最後一個子元素。
• :nth-child(n):根據子元素的位置選擇特定子元素（其中 "n" 是一個整數）。

以下是我對:hover做的範例:
:hover是css中的偽元素，他的功能就是當使用者將鼠標聽留在特定元素上面，就能產生特定效果。

我們先看語法

selector:hover {
    /*你要改變的樣子*/
}

再來看HTML範例:

<div class="hello">
    <span>你好</span>
</div>

css

.hello:hover{
    color: blue;
}

這樣滑鼠滑過就能改變他的顏色，再來我暑假遇到的問題是當滑鼠滑過時會顯示出清單，我們也是直接看簡單的範例。

<div class="slip">
    <span>你好</span>
    <div class="from">
        <ul>
            <li>選項1</li>
            <li>選項2</li>
            <li>選項3</li>
        </ul>
    </div>
</div>

再來看css

.from{
    display: none;
}
.slip:hover .from{ 
    display: block;
}

我來解釋一下css的部分，首先我們要先用display: none;把清單隱藏起來，再來將原本的語法後面空格加上清單的選擇器，像範例那樣，還有就是HTML的部分，要把清單寫在slip裡面，不然不會顯示出來。

那今天就先介紹到這裡，寫鐵人賽真的是一大考驗，畢竟是第一次寫文筆不好還真的請多多見諒，我要去吃晚餐了，小弟我就先下下線了，我們明天再見吧。