如何摆脱< span>上的下划线内部< a>标记与悬停？ [英] How to get rid of underline on <span> inside <a> tag with hover?

问题描述

小提琴

HTML

 < ul> 
< li>< a href =＃>讯息< span> 1< / span>< / a>< / li& 
< / ul> 
  

CSS

  a {
 text-decoration：none; 
} 
 
 a：hover {
 text-decoration：underline; 
} 
 
 a：hover span {
 text-decoration：none; 
} 
 
 span {
 background-color：red; 
 border-radius：999px; 
 color：white; 
 margin-left：2px; 
 position：relative; 
 top：-.5em; 
 font-size：.75em; 
 font-weight：bold; 
 padding：0 .3em; 
} 
  

当您将鼠标悬停在链接上时，下划线将应用于< span> ，即使我已设置 text-decoration：none 。有没有办法摆脱它？

解决方案

尝试更改显示 < span> 到 inline-block ，如下所示：

这里的例子

< pre class =lang-css prettyprint-override> span {
background-color：red;
border-radius：999px;
color：white;
margin-left：2px;
position：relative;
top：-.5em;
font-size：.75em;
font-weight：bold;
padding：0 .3em;
display：inline-block; / * < - 添加声明* /
}


说明

根据 CSS 2级规范 ， text-decoration 不会传播到嵌套原子内联级元素的内容，例如inline-blocks和inline-tables。 p>

16.3.1下划线，叠加，敲击和闪烁：'text-decoration'属性

[...]请注意，文本装饰不会传播到浮动和
绝对定位的后代，也不会传播到原子
内联级后代的内容，例如内联块和内联表。

< blockquote>

此外规范声明（我强调）：

下划线，则会跳过仅向文本
（包括空格，字母间距和字间距）：边距，
边框和填充 。用户代理不得在不是文字的内容上呈现这些
文字装饰。例如，图片和
内嵌框不得带下划线。

因此：

相对定位后代移动所有影响它的文本修饰以及后代的文本;它不会影响装饰在该线上的初始位置的计算。

fiddle

HTML

<ul>
    <li><a href="#">Messages<span>1</span></a></li>
</ul>

CSS

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:hover span {
    text-decoration: none;
}

span {
    background-color: red;
    border-radius: 999px;
    color: white;
    margin-left: 2px;
    position: relative;
    top: -.5em;
    font-size: .75em;
    font-weight: bold;
    padding: 0 .3em;
}

When you mouse-over the link the underline is applied to the <span> even though I've set text-decoration: none. Is there a way to get rid of it?

解决方案

Try changing the display of <span> to inline-block as follows:

Example Here

span {
    background-color: red;
    border-radius: 999px;
    color: white;
    margin-left: 2px;
    position: relative;
    top: -.5em;
    font-size: .75em;
    font-weight: bold;
    padding: 0 .3em;
    display: inline-block; /* <-- Added declaration */
}

Explanation

According to CSS level 2 specification, text-decoration is not propagated to the contents of nested atomic inline-level elements - such as inline-blocks and inline-tables.

16.3.1 Underlining, overlining, striking, and blinking: the 'text-decoration' property

[...] Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.

Also the spec states (my emphasis):

Underlines, overlines, and line-throughs are applied only to text (including white space, letter spacing, and word spacing): margins, borders, and padding are skipped. User agents must not render these text decorations on content that is not text. For example, images and inline blocks must not be underlined.

Also note that text decorations would stick with the text itself, therefore:

Relatively positioning a descendant moves all text decorations affecting it along with the descendant's text; it does not affect calculation of the decoration's initial position on that line.

这篇关于如何摆脱&lt; span&gt;上的下划线内部&lt; a&gt;标记与悬停？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！