I've dedicated a significant amount of time crafting my ultimate HTML FAQ with detailed summaries styled in CSS.
There's one aspect that continues to elude me - achieving the perfect orange background color for expanded topics:
My goal is for a selected topic to remain highlighted in orange even after clicking, regardless of the mouse movement as depicted in the image below.
The issue arises when the mouse moves away causing the background of the selected topic to revert to white.
If I assign the details an orange color, all items end up turning orange, thus defeating the purpose of highlighting specific ones.
I desire closed items to have a white background and opened ones to display in orange.
What could I possibly be missing?
Bonus: Could you please streamline my CSS code by eliminating unnecessary elements, creating a more elegant and clutter-free design?
https://i.sstatic.net/VZ1NF.png
html, body {background: #EEE}
article{display:block;
margin: 40px auto;
width: 700px;
}
details{
background: white;
overflow: hidden;
outline: 1px solid black;
padding: 20px;
margin-bottom: 1px;
}
details[open] summary:after {content: "\25BC"}
details:hover {background: #FFD700;}
details[open] summary {
color: white;
background: #FFD700;
margin-bottom: 0px;
font-weight: bold;
transition: all .5s ease;
}
summary {
cursor: pointer;
user-select: none;
display:block;
padding: 20px;
margin:-20px;
}
summary:after {
content: "\25C1";
float:right;
margin-right: 0px; /* Arrow margin */
width: 20px;
}
/*details summary::marker {display:none} hides the standard > sign. Apparently not needed anymore? */
/*summary:focus {outline:0 !important}; hides blue border in chrome. Apparently not needed anymore? */<article>
<details><summary>First Topic</summary>
Additional explanation additional explanation<br>
Additional explanation additional explanation
</details>
<details><summary>Second Topic</summary>
Additional explanation additional explanation<br>
Additonal explanation additional explanation
</details>
<details><summary>Third Topic</summary>
Additional explanation additional explanation<br>
Additional explanation additional explanation
</details>
</article>