<p>Preferred: Changing the default cursor to a pointer symbol when you hover over the summary text.</p>
<details>
<summary>
<h3>How will we conduct IEP and 504 meetings?</h3>
</summary>
<div>
<p>All meetings will be held remotely.</p>
</div>
</details>
<p>Default: Keeping the text cursor when you hover over the summary text.</p>
<details>
<summary style="cursor: text;">
<h3>How will we conduct IEP and 504 meetings?</h3>
</summary>
<div>
<p>All meetings will be held remotely.</p>
</div>
</details>
body {
font-family: system-ui, "Segoe UI", Roboto, sans-serif;
margin: 0 auto;
max-width: 60rem;
padding: 0 .5rem;
}
details {
background: #eee;
margin-bottom: 2rem;
padding: .5rem 1rem;
}
summary {
cursor: pointer;
}
summary > * {
display: inline;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.