如何解决将鼠标悬停在 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。