仅从锚元素子项中删除下划线

Question

如果a代码包含子元素，例如i代码，它仍会在悬停时应用下划线，我想知道如何删除下划线当有人将鼠标悬停在i标记上时，只显示a标记。

我正在使用的CSS：

a{
    display:block;
    text-decoration:none;
}
a i{
  color:#888;
  margin-left:5px;
}
a:hover{
    text-decoration:underline;
}
a:hover i{
    text-decoration:none !important;
}

这是一个解释的小提琴： http://jsfiddle.net/kkz66x2q/

当您将鼠标悬停在链接上时，我只希望下划线仅在i元素上为GONE。

Answer 1

尝试关注css，

a:hover i{
    display: inline-block; <-- this is the trick
    text-decoration:none !important;
}

Demo

Answer 2

将display的{​​{1}}属性设置为i：

inline-block

JSFiddle

Answer 3

我遇到了同样的问题并使用以下css规则解决了这个问题：

a:-webkit-any-link {text-decoration:none}

希望它有所帮助！

Answer 4

只需添加display:inline-block;

即可

<强> FIDDLE DEMO

a:hover i {
    display:inline-block;
    text-decoration:none !important;
}

Answer 5

你也可以写HTML

    <a href="#">Link</a><i>(2)</i>

和CSS一样

  a{
    display:inline-block;
    text-decoration:none;
  }

Answer 6

我在这里添加了两件事......

有时使用代码作为（常规内联）锚点的子代，有时不使用：

  code
    font-family: Courier New, Courier, monospace
    color: green
    background: rgba( white, .2 )
    padding: 2px 4px
    text-decoration: none

  a code
    display: inline-block
    line-height: normal
    text-decoration: underline

1. 您应该添加line-height: normal以补偿内联块，否则您将在链接元素上使用与其他元素不同的填充。 （即你的行高很容易开始看起来不一致）

2. 并且可选：如果您只是恼火，那下划线有不同的颜色（即outer link color，而不是code的绿色设置文本修饰一旦再次在内部元素上有帮助......

Answer 7

我遇到了同样的问题。

但是我希望内部元素是正确， 因此只需设置- debug: msg: "{{ DVS_Result.current| json_query('[].fvRsDomAtt.attributes.dn') }}" 即可。

float: right

供您参考。