If I create a list using <ul> and remove the borders from the <li> elements. When a <li> is hovered over, it gains a 3px black border. If a <li> is clicked, it becomes a child <span> of the selected <li>.
The issue arises when hovering over the <span> element as an additional 3px border is added, resulting in a total of 6px border.
Is there a way to prevent this behavior?
How can I disable the hover effect on child elements of the li?
Here is the current code snippet:
.tablinks li {
color: #8c8c8e;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.tablinks span {
display: block;
border-top-color: #000;
border-top-style: solid;
border-width:3px;
color:#000;
}
.tablinks > li:hover {
color: #000;
border-top-color: #000;
border-top-style: solid;
border-width:3px;
}
I have attempted to set the border-width of span:hover to 0px but the transition causes the border to jump from 3px to 0px and back, resulting in a poor visual effect:
.tablinks span:hover {
border-width:0px;
}