嵌套标签，悬停状态被忽略答案

【问题标题】：Nesting a tag, hover state ignored嵌套标签，悬停状态被忽略
【发布时间】：2015-02-02 02:52:30
【问题描述】：

<a href="#" class="a-hover-underline">
    <div class="grid-md-2-3 background-div"></div>

    <div class="grid-1 grid-md-1-3 content-div">
        <h2>some text...</h2>
        <p>some text...</p>
    </div>
</a>

所以我有一个带有嵌套'a'标签的设置......我想要实现的是在锚点悬停时为文本加下划线。我的样式表文件中有 a:hover { text-decoration: underline }，但文本在锚点悬停时没有下划线。我尝试使用 jQuery 在那个“a”标签上测试悬停事件，它可以工作。

有什么想法或解决方法吗？

谢谢！

【问题讨论】：

在这里工作：jsfiddle.net/webtiki/r01sq43e
我认为你的 CSS 有问题。您可以在不自己解决的情况下发布一个最小的完整示例吗？
我解决了这个问题。我必须在我的“a”样式中添加额外的 *。 Sass 代码看起来像这样：a { &, * { text-decoration: none; } &:hover { &, *: text-decoration: underline;我猜在“a”标签内设置嵌套元素样式存在问题（尽管通过 html5 规范“a”标签可以嵌套！），看起来应用于“a”的样式被忽略了。

标签： css hover nested underline

【解决方案1】：

只需将没有悬停的原始设置为不加下划线，它应该可以工作。

.a-hover-underline:hover { text-decoration:underline; }
.a-hover-underline { text-decoration:none; }

JSFiddle - http://jsfiddle.net/d2k2t7oc/

【讨论】：

【解决方案2】：

see this 这对我有用。我把你的问题弄错了吗？

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

【讨论】：