Take a look at the provided code snippet below.
The structure is
<ul>
<li>text1</li>
<li> <ul><li> text2 </li>
<li> text3 </li>
</ul>
</li>
</ul>
The CSS used is as follows:
li:hover
{
background-color: yellow;
}
While this styling works correctly for the first li, when hovering over the second item (in the sub-ul), all items in the sub list are highlighted.
What I want is for only one row to be highlighted at a time, regardless of its relationship within the list items.
I attempted
li:only-child:hover
but it was unsuccessful. Many solutions on Stack Overflow suggest using jQuery to address this issue. Is there a way to resolve this using just CSS?
ul {
list-style-type: none;
}
li:hover {
color: blue;
cursor: pointer;
background-color: yellow;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>Lv1: First Item</li>
<li>Lv1: Second Item</li>
<li>
<ul>
<li>Lv2: First Item</li>
<li>
<ul>
<li>Lv3: First Item</li>
<li>Lv3: Second Item</li>
<li>Lv3: Third Item</li>
</ul>
</li>
<li>Lv2: Second Item</li>
<li>Lv2: Third Item</li>
</ul>
</li>
</ul>