css - 嵌套标签，忽略悬停状态

Question

<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”标签的设置...我想要实现的是在 anchor 悬停时为文本添加下划线。我的样式表文件中有一个:hover { text-decoration: underline }，但文本在 anchor 悬停时没有加下划线。我尝试使用 jQuery 在那个“a”标签上测试悬停事件并且它有效。

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

谢谢!

Answer 1

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

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

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