CSS：在部分链接中跳过下划线

Posted 2023-03-05

技术标签:

【中文标题】CSS：在部分链接中跳过下划线【英文标题】：CSS: Skip underline in part of link 【发布时间】：2011-02-27 16:08:13 【问题描述】：

是否可以有一个连续的链接，其中文本通常在鼠标悬停时带有下划线，但在中间有一个部分（例如图像）没有此下划线？这不起作用：

<a href="#">one <span style="text-decoration:none;">two</span> <img src="img.png" style="border:0px; text-decoration:none;"> three</a>

【问题讨论】：

【参考方案1】：

创建一个隐藏下划线的类，以及添加它们的子类。

.underline-some 
  text-decoration: none;


.underline-some:hover .text 
  text-decoration: underline;

<a href="#" class="underline-some">
  <span class="text">Boyz</span> ??
  <span class="text">Men</span>
</a>

上面的示例代码仅在悬停时为链接添加下划线。对于始终带下划线的链接，请删除 :hover。

【讨论】：

这应该是公认的答案...重点是从父元素中删除下划线，然后仅将其重新应用于您希望加下划线的子元素。【参考方案2】：

a, a:hover  text-decoration: underline; 
a img, a:hover img  text-decoration: none !important;

【讨论】：

如果我想在悬停后在三个而不是两个下划线怎么办？样式：a, a:hover text-decoration: underline; a img, a:hover img, span.two text-decoration: none !important;边框：0；和标记：一个两个三个无法使任何这些工作。图片仍带下划线。【参考方案3】：

<a href="#" style="text-decoration:none;">
     <span style="text-decoration:underline;">one</span>  
    two
    <img src="img.png" style="border:0px; text-decoration:none;"> three
</a>

我认为只能如下使用javascript。

看下面的例子

<html>
<head></head>
  <style>
    a
       text-decoration:none;
     

    a:hover
     
       text-decoration:none;
     

    .sample
     
        text-decoration:underline;
     

    .sample_none
     
        text-decoration:none;
     
   </style>
   <script type="text/javascript">
      function show_underline()
        document.getElementById('sample').className= 'sample';
      

      function hide_underline()
        document.getElementById('sample').className= 'sample_none';
      
   </script>
    <a href="#" onmouseover="show_underline();" onmouseout="hide_underline();"> <span id="sample" class="sample_none">two</span>  
    <img src="img.png" style="border:0px;"> three
    </a>


</body>
</html>

附：我想知道是否可以仅使用 css 和 html

【讨论】：

这将强制下划线一直处于打开状态。如果我创建一个特殊的类来处理悬停，它会破坏连续的链接。请在完成后粘贴您的代码。我想知道你如何处理悬停。 neways 非常好的问题:) Salil：经过进一步测试，我发现它并没有解决我的问题。检查我使用 javascript 的示例。您的示例有效，但仅适用于一个“文本部分”，因为它使用 id 来查找要下划线的文本。另外，这么简单的事情似乎有点复杂。【参考方案4】：

我真正想要的是将图像“附加”到链接上，而不会在悬停时加下划线。这是我想出的解决方案：

<a href="#" style="background:url('pic.png') no-repeat; background-position: left center; padding-left: 20px;">Link</a>

padding-left 用于偏移文本，使其不与图片。 背景位置你可以移动图像以使其更好与文字对齐。如果图像高于文本 padding-top padding-bottom 可用于调整外观。

这种技术也可以与 CSS sprites 一起使用，如下所示：

<a href="#" style="background:url('sprites.png') no-repeat; background-position: -16px -16px; padding-left: 32px;">Link</a>

我使用了类似的技术来使用 CSS sprites 而不是普通的内联图像：

<span style="background:url('sprites.png') no-repeat; background-position: -16px -16px; padding-left: 32px;"></span>

希望这对某人有所帮助

【讨论】：

将的文本包装在一个 span 中，然后附加使用这种背景精灵技术的 CSS 类对我来说非常有效。

以上是关于CSS：在部分链接中跳过下划线的主要内容，如果未能解决你的问题，请参考以下文章