Keeping Parent Visible While Child in :focus

Say we have a

.
We only want this div to be visible when it’s hovered, so:
div:hover {
opacity: 1;
}
We need focus styles as well, for accessibility, so:
div:hover,
div:focus {
opacity: 1;
}
But div’s can’t be focused on their own, so we’ll need:
<div tabindex=”0">
</div>
There is content in this div. Not just text, but links as well.
<div tabindex="0">
<p>This little piggy went to market.</p>
<a href="#market">Go to market</a>
</div>
This is …

Keeping Parent Visible While Child in :focus is a post from CSS-Tricks

Link: https://css-tricks.com/keeping-parent-visible-child-focus/