1

我制作了一个<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;
}
4

3 回答 3

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.

演示- 不包括选定的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;
}
于 2013-10-16T14:59:05.847 回答
0

尝试

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

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

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

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

.tablinks > span

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

于 2013-10-16T14:45:05.813 回答
0

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

.tablinks li:hover span {
    border-width: 0px;
}
于 2013-10-16T14:45:48.063 回答