时间戳

首页 > 解决方案 > 将鼠标悬停在 li 内的特定文本上时禁用下划线

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

问题描述

我有这些代码：

<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;}

标签： csshtml-listsunderline

解决方案

这里的问题是 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>

推荐阅读