如何为< details>的箭头设置样式<摘要>元素? [英] How to style the arrow of <details> <summary> elements?

问题描述

我正在使用此代码(另请参见 JSFiddle )来更改悬停时的箭头背景颜色.但是，这无效，因为箭头仅在单击时更改其颜色.

I am using this code (also see the JSFiddle) to change the arrow background color on hover. However this doesn't work as the arrow only changes its color on click.

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>

推荐答案

:hover应该在details标记上(而不是summary)上.

The :hover should be on the details tag (not the summary).

尝试一下，它将起作用:

Try this, it will work:

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

这篇关于如何为< details>的箭头设置样式<摘要>元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！