我制作了一个<ul>
,它的 -<li>
元素没有边界。如果 a<li>
被悬停,它会得到一个 3px 的黑色边框,如果 a<li>
被单击,它将成为 selected 的<span>
-child <li>
。
不幸的是,如果我将鼠标悬停<span>
,则会添加一个额外的 3px 边框,因此会显示总共 6px 的边框。
我怎样才能避免这种情况?
有没有办法禁用li:hover
对孩子的影响li
?
我的代码:
.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;
}
我已经尝试将边框宽度设置 span:hover
为 0px。不幸的是,边框会跳到 0px,然后跳到 3px,这看起来很可怕(我认为是由过渡引起的):
.tablinks span:hover {
border-width:0px;
}