将鼠标悬停在 li 内的特定文本上时禁用下划线答案

【问题标题】：disable underline when hovering on specific text inside li将鼠标悬停在 li 内的特定文本上时禁用下划线
【发布时间】：2021-04-25 18:23:40
【问题描述】：

我有这些代码：

<nav role="navigation" class="toc">
  <span class="toc-title">Title:</span>
  <ul>
    <li><a href="">Some Text <textstyle>non-underlined text</textstyle></a></li>
  </ul>
</nav>

我希望当鼠标悬停在<li> 元素上时，只有Some Text 会加下划线，而textstyle 元素内的文本不会加下划线。

我试过了：

textstyle:hover, li a textstyle:hover, a > textstyle:hover{text-decoration: none;}

【问题讨论】：

标签： css html-lists underline

【解决方案1】：

您的 CSS 选择器错误。它实际上所做的是在悬停时选择<textstyle>。您的新 CSS 代码应如下所示：

        li:hover > a{
            text-decoration: none;
        }
        li:hover > a > textstyle{
            text-decoration: underline;
        }

【讨论】：

【解决方案2】：

nav a, textstyle {
text-decoration: none;
 display: inline-block;
 background-image: linear-gradient(#000, #000);
 background-size: 100% 1px;
 background-repeat: no-repeat;
  background-position: 0 100%;
}
textstyle {
 background-image: linear-gradient(#fff, #fff);
}

<nav role="navigation" class="toc">
  <span class="toc-title">Title:</span>
  <ul>
<li><a href="">Some Text <textstyle>non-underlined text</textstyle></a></li>
  </ul>
</nav>

【讨论】：

【解决方案3】：

“我希望当鼠标悬停在

元素上时...” => 悬停在 li 元素上

    a {
    text-decoration: none;
    }
    
    li:hover .some-text-underlined {
        text-decoration: underline;
  
    }

<nav role="navigation" class="toc">
  <span class="toc-title">Title:</span>
  <ul>
    <li>
      <a href="">
        <span class="some-text-underlined">Some Text </span>non-underlined text
      </a>
    </li>
  </ul>
</nav>

【讨论】：

【解决方案4】：

把“Some Text”放到一个单独的span中：

<li><a href="#"><span class="underlined">Some Text</span><span> Some other text</span></a>
</li>

然后在 CSS 中：

li:hover .underlined {
    text-decoration: underline;
}

a {
    text-decoration: none;
}

添加下划线时不能部分删除，同样，不能添加部分下划线（没有单独的元素）。

【讨论】：

抱歉，您必须先禁用默认下划线。我会编辑

【解决方案5】：

这里的问题是 textstyle 不是带下划线的元素，锚标签是这样你就可以做这样的事情（不确定你想使用什么选择器，但这里是一个）

li a:hover {
  text-decoration: none;
}

<nav role="navigation" class="toc">
  <span class="toc-title">Title:</span>
  <ul>
    <li><a href="">Some Text <textstyle>non-underlined text</textstyle></a></li>
  </ul>
</nav>

【讨论】：

【解决方案6】：

您可以将“某些文本”设为<textstyle>，这意味着您的 HTML 代码将是：

<nav role="navigation" class="toc">
  <span class="toc-title">Title:</span>
  <ul>
    <li><a href=""><textstyle>Some Text</textstyle> non-underlined text</a></li>
  </ul>
</nav>

然后你可以使用下面的样式表来给一些文本加下划线：

li:hover > a {
  text-decoration: none;
}

li:hover textstyle {
  text-decoration: underline;
}

片段：

li:hover > a {
  text-decoration: none;
}

li:hover textstyle {
  text-decoration: underline;
}

<nav role="navigation" class="toc">
  <span class="toc-title">Title:</span>
  <ul>
    <li><a href=""><textstyle>Some Text</textstyle> non-underlined text</a></li>
  </ul>
</nav>

【讨论】：