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

我制作了一个

，它的

-元素没有边框。如果将

悬停，它将获得一个3倍的黑边框，如果单击

，它将成为所选
的子级

不幸的是，如果我将此
悬停，将添加一个额外的3px边框，因此将显示总共6px的边框

我怎样才能避免这种情况

有没有办法对
li
的子项禁用
li:hover
效果

我的代码：

.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，这看起来很可怕（我认为是过渡造成的）：

试一试

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

使用.tablinks span会影响li元素的span子元素，因此当您悬停li时，需要3px（“.tablinks>li:hover”表示），并且“.tablinks span”会在li元素下设置3px

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

如果您的范围已直接指向.tablinks，请尝试

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

使用.tablinks span会影响li元素的span子元素，因此当您悬停li时，需要3px（“.tablinks>li:hover”表示），并且“.tablinks span”会在li元素下设置3px

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

如果您的范围已经是.tablinks的直接链接，请尝试添加它，而不是添加您发布的最后一个区块：

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

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

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

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

这将允许您使用
：not
选择器排除所选元素，如下所示：

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

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

.tablinks > li:not([data-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>

然后将CSS更改为类似以下内容：

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

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

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

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

这将允许您使用
：not
选择器排除所选元素，如下所示：

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

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

.tablinks > li:not([data-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>

然后将CSS更改为类似以下内容：

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

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

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

删除
边框宽度：0px在悬停中。悬停时边框将是6px而不是3px。我在任何地方都看不到6px，你能贴一张小提琴吗？标记是什么<代码>ul>li>span
？如果是这样的话，只需添加
.tablinks li:hover span{border:none；}
我不清楚您想做什么，我试图复制它，但我不清楚。删除
边框宽度：0px在悬停中。悬停时边框将是6px而不是3px。我在任何地方都看不到6px，你能贴一张小提琴吗？标记是什么<代码>ul>li>span
？如果是这样的话，只需添加
.tablinks li:hover span{border:none；}
我不清楚您想做什么，我试图复制它，但我不清楚。当添加外部
li
的边框时，当
span
的边框被删除时，这会导致非常明显的闪烁。假设OPs HTML就像小提琴一样。根据OP中提供的CSS，我假设这样做。这会导致非常明显的闪烁，因为
span
的边框被删除，而外部
li
的边框被添加。假设OPs HTML就像小提琴一样。我假设通过OP.
.tablinks span{border width:0px；}
提供的CSS可以将边框一起从
span
中删除。根据问题中的CSS，我假设
span
上的边框是有意为显示选择了
li
。因此，我假设删除它不是一个选项。
.tablinks li span{border width:0px；}
一起从
span
中删除边框。根据问题中的CSS，我假设
span
上的边框是有意为显示选择了
li
。所以我认为移除它不是一种选择。