将鼠标悬停在 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;}

解决方法

将“一些文本”放入单独的跨度：

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

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

,

您的 CSS 选择器有误。它实际上做的是在悬停时选择 <textstyle>。 你的新 CSS 代码应该是这样的：

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

,

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

,

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>

,

“我希望将鼠标悬停在 元素上...” => 悬停在 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>

,

您可以将“某些文本”设为 <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>

然后你可以使用下面的样式表来保持 Some text 带有下划线：

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>