html - 如何设置 元素的箭头样式？

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