如何設計<details><summary>元素的箭頭？

Question

我正在使用此代碼（也請參閱JSFiddle）更改懸停時的箭頭背景顏色。但是，這不起作用，因爲箭頭只在點擊時改變其顏色。

summary::-webkit-details-marker { 
 
    color: #B6B6B6; 
 
    font-size: 20px; 
 
    margin-right: 2px; 
 
} 
 
summary::-webkit-details-marker:hover { 
 
    color: red; 
 
}

<details class="DetailContainer"> 
 
    <summary>Step by Step Guides</summary> 
 
    <details class="DetailsOne"> 
 
    <summary>Getting Started</summary> 
 
    <p>1. Signup for a free trial</p> 
 
    </details> 
 
    <details class="DetailsOne"> 
 
    <summary>Setting up a backup schedule</summary> 
 
    <p>This step assumes you have already signed up and installed the software</p> 
 
    </details> 
 
</details>

Answer 1

的:hover應該在details標籤（不是summary）。

試試這個，它會工作：

details:hover summary::-webkit-details-marker:hover { 
    color:red; 
    background:white; 
}