如何设置<details> <summary>元素的箭头样式？

Question

我正在使用此代码（另请参阅JSFiddle）更改悬停时的箭头背景颜色。但是这并不起作用，因为箭头只会在点击时改变颜色。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

:hover应位于details标记上（而不是summary）。

试试这个，它会起作用：

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