如何设置嵌套div内a标签hover仅下划线标题而非描述文本？

问题描述 #

需要创建包含图片、标题和文本的可点击链接容器，要求整个容器可点击，但鼠标悬浮时，仅类为link-title的<h3>标题显示下划线，类为link-description的文本不显示下划线。当前a:hover样式会让容器内所有内容添加下划线，尝试使用:not()选择器无法覆盖该样式。

解决方案 #

问题核心在于text-decoration是直接作用在<a>元素本身的样式，并非子元素继承而来，因此:not()选择器无法单独控制子元素的下划线显示。正确处理方式如下：

修改后的CSS代码：

a {
  text-decoration: none;
  cursor: pointer;
}

/* 移除a元素hover/active/focus时的全局下划线 */
a:hover, a:active, a:focus {
  text-decoration: none;
}

/* 当a被交互时，仅给link-title添加下划线 */
a:hover .link-title,
a:active .link-title,
a:focus .link-title {
  text-decoration: underline;
}

/* 确保描述文本始终无下划线 */
.link-description {
  text-decoration: none;
}

HTML代码保持原结构即可：

<div class="links">
    <a href="https://www.google.com" target="_blank" class="spalink" title="">
        <div class="link-container">
            <div class="link-image" style="background-image: url(IMAGE);"></div>
        </div>
        <div class="link-content">
            <h3 class="link-title">Vacations</h3>
            <div class="link-description">Let's take some vacations!</div>
        </div>
    </a>
</div>

原理说明 #

• 原a:hover设置的下划线是给整个链接元素添加的，无法通过子元素的:not()取消，因为该样式不属于继承属性。
• 先移除<a>的全局交互下划线，再单独给需要高亮的标题子元素设置交互样式，即可精准实现“仅标题hover显示下划线”的需求。

内容的提问来源于stack exchange，提问作者pickles4life