Question

我制作了<ul>，其<li> - 元素没有边框。如果<li>悬停，则会获得3px黑色边框，如果点击<li>，则会成为所选<span>的{{1}}个孩子。

不幸的是，如果我将此<li>悬停，则会添加额外的3px边框，因此会显示总共6px的边框。

我该如何避免这种情况？

有没有办法停用对<span>的儿童的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; }的边框宽度设置为0px。不幸的是边界会跳到0px，然后跳到3px看起来很可怕（由我认为的过渡引起）：

span:hover

Answer 1

如果您能够添加注入span标记的代码，则可以将类添加到您选择的li元素中。

这样您就可以使用:not选择器排除所选元素，类似于：

.tablinks > li:not(.selected):hover{
   color: #000;
   border-top-color: #000;
   border-top-style: solid;
   border-width:3px;
}

假设你有这个默认的HTML：

<ul class="tablinks">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
</ul>

选择一个项目后，您最终得到：

<ul class="tablinks">
    <li>item 1</li>
    <li class="selected"><span>item 2</span></li>
    <li>item 2</li>
    <li>item 3</li>
</ul>

使用上述CSS更改将排除选定的li。

DEMO - 排除选定的li

它不必是一个类，它也可以是一个数据属性，类似于：

<ul class="tablinks">
    <li>item 1</li>
    <li data-selected><span>item 2</span></li>
    <li>item 2</li>
    <li>item 3</li>
</ul>

然后将CSS更改为类似于此的内容：

.tablinks > li:not([data-selected]):hover{
    color: #000;
    border-top-color: #000;
    border-top-style: solid;
    border-width:3px;
}

Answer 2

尝试

.tablinks li span { border-width: 0px; }

您将删除影响“li span”边框宽度的.tablinks span {border-width}类

使用.tablinks span你会影响li元素的span子元素，所以当你将li悬停时，需要3px（“.tablinks＆gt; li：hover”表示）和“.tablinks span”设置3px在li元素下。

您还可以将“.tablinks span”更改为

.tablinks > span

如果你的跨度已经直接来自.tablinks

Answer 3

尝试添加，而不是您发布的最后一个块：

.tablinks li:hover span {
    border-width: 0px;
}

避免使用双边框大小：hover伪子类的子元素

3 个答案: