I'm trying to create an overlay effect when hovering on a <li>
element inside a <ul>
.
I want this element to be common to every <li>
.
My first idea was to put an additional element, like a <div>
, inside the list.
Sketchy example:
<ul>
<li></li>
<li></li>
<li></li>
<div></div>
</ul>
ul div {
opacity: 0
}
li:hover ~ div {
opacity: 1
}
However, we can't put any tag inside a <ul>
other than a <li>
, because it would be considered invalid markup.
Since there is no way to select the parent of an element, is there any way to resolve this issue using CSS only?