7

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

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

4 回答 4

4

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

.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.

于 2020-01-24T05:30:38.447 回答
3 
a, a:hover { text-decoration: underline; }
a img, a:hover img { text-decoration: none !important; }
于 2010-06-04T08:28:25.537 回答
2 
<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>

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

于 2010-06-04T07:40:02.747 回答
1

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

<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 精灵一起使用：

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

希望这可以帮助某人

于 2010-07-09T12:57:19.353 回答