当链接覆盖p，h3和img时，从p中删除下划线

Question

在此处使用http://www.bbc.com/news作为示例。我有一个图像，标题和段落。我把它们都链接在一个标签内。我希望只有标题用悬停加下划线，但段落也加下划线。当我将鼠标悬停在段落和图像上时，我想要标题下划线，就像在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

即使你将鼠标悬停在图片或段落上，h3也会被加下划线：

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

Answer 2

您可以尝试“a h3：hover”而不是“a：hover”。这样就可以将h3放在一个标签内，并且仅强调该标记。