svg< text> < a>中的元素元素在Chrome中的悬停时下划线 [英] svg <text> element inside <a> element gets underline on hover in Chrome

问题描述

标题几乎说明了一切.嵌套在<a>元素中的SVG <text>元素在鼠标悬停时有下划线，但仅在Chrome中. Firefox或IE中没有下划线.

The title pretty much says it all. My SVG <text> element nested within an <a> element gets an underline on mouse hover, but only in Chrome. There is no underline in Firefox or IE.

我是否还应该设置一些属性以删除Chrome中的下划线?

Is there some attribute I should set to remove the underline in Chrome as well?

这是我的代码

<a xlink:href="#" class="node">
    <title>Some title</title>
    <circle class="little" r="50" cx="60" cy="360" fill="#0088cc"></circle>
    <text font-size="20px" font-weight="bold" fill="white" text-decoration="none" text-anchor="middle" dominant-baseline="central" x="60" y="360">Some text</text>
</a>

推荐答案

当您在jsfiddle中复制代码，所以我猜您的样式表中有这样的内容:

This doesn't happen when you reproduce your code in a jsfiddle, so I'm guessing your stylesheet has something like this:

a:hover {
   text-decoration: underline;
}

尝试通过编写以下行为来替代此行为:

Try overriding this behavior by writing:

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

这篇关于svg< text> < a>中的元素元素在Chrome中的悬停时下划线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！