CSS：跳过链接部分的下划线

发布于 2024-09-04 18:23:35 字数 256 浏览 9 评论 0原文

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

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

原文

Is it possible to have a contiguous link, where the text is normally underlined on mouse hover, but in the middle have a section (eg an image) without this underline? This does not work:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

星光不落少年眉 2024-09-11 18:23:35

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

.underline-some {
  text-decoration: none;
}

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

<a href="#" class="underline-some">

  <span class="text">Boyz</span>

Make a class that hides underlines, and child class that adds them.

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

This example code above only underlines links on hover. For always-underlined links, remove :hover.

回复收藏 0 原文

情深缘浅 2024-09-11 18:23:35

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 { text-decoration: none !important; }

回复收藏 0 原文

用心笑 2024-09-11 18:23:35

<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

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

I think it can only be possible using javascript as follows.

LOOK FOLLOWING EXAMPLE

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

P.S. I would like to know if it is possible with css and html only

回复收藏 0 原文

思慕 2024-09-11 18:23:35

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

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

希望这对某人有帮助

What I really wanted was to have an image "attached" to links, without it getting underlined on hover. Here is a solution I came up with:

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

padding-left is for offsetting the text so it does not overlap the
image.
With background-position you
can move the image to make it better
aligned with the text.
If the image
is higher than the text padding-top
and padding-bottom can be used to
tweak the appearance.

This technique can also be used with CSS sprites like this:

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

I used a similar technique to use CSS sprites instead of ordinary inline images:

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

Hope this helps someone

回复收藏 0 原文

~没有更多了~

关于作者

披肩女神

暂无简介

0 文章

0 评论

24 人气

关注发私信

尘世孤行

文章 0 评论 0

关注

烟─花易冷

文章 0 评论 0

关注

你是年少的欢喜

文章 0 评论 0

关注

倒带

文章 0 评论 0

关注

忱杏

文章 0 评论 0

关注

送君千里

文章 0 评论 0

友情链接

文江博客

CSS：跳过链接部分的下划线

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

尘世孤行

烟─花易冷

你是年少的欢喜

倒带

忱杏

送君千里

友情链接

CSS：跳过链接部分的下划线

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

尘世孤行

烟─花易冷

你是年少的欢喜

倒带

忱杏

送君千里

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。