5

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>
j08691
  • 204,283
  • 31
  • 260
  • 272
user3741124
  • 111
  • 2
  • 2
  • 9
  • 1
    Possible duplicate of [Replace the expand ( ▶) icon of HTML5 details tag](http://stackoverflow.com/questions/10813581/replace-the-expand-icon-of-html5-details-tag) – Heretic Monkey Sep 21 '16 at 17:05

1 Answers1

10

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;
 }
Potherca
  • 13,207
  • 5
  • 76
  • 94
Asifuzzaman Redoy
  • 1,773
  • 1
  • 15
  • 30