当 link 覆盖 p、h3 和 img 时从 p 中删除下划线

Question

这里以http://www.bbc.com/news为例。我有一张图片，header，和一段在一起。我将它们全部链接在一个标签中。我只希望 header 在悬停时加下划线，但该段落也加了下划线。当我将鼠标悬停在段落和图像上时，我希望 header 带有下划线，就像在 BBC 新闻网站上一样。

<a href="link">     
    <img src="" class="main-image" alt="">
    <h3>Underline this on Hover only</h3>
    <p class="front-description">This is a sentence we don't want to be 
        underlined on for any condition</p>
</a>

这是我的 CSS:

a:hover {
    color: #4A310E;
    text-decoration: underline;
}
p.front-description:hover {
    text-decoration: none;
}

Answer 1

您可以尝试 "a h3:hover" 而不是 "a:hover"。这会在 a 标签内获取 h3 并仅在其下划线。

Answer 2

即使将鼠标悬停在图片或段落上，h3 仍带有下划线：

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

当 link 覆盖 p、h3 和 img 时从 p 中删除下划线

Removing underline from p when link covers p, h3 and img

html

css

hyperlink

underline