<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; 
}