我正在尝试将text-decoration-color
过渡效果应用于链接的子元素。以下是该标记的示例:
<div class="post">
<a href="/" class="post-link">
<div>
<h1>Post name</h1>
<div>
Lorem ipsum...
</div>
</div>
</a>
</div>
整个帖子部分是一个易于点击的链接,但悬停时我只想在<h1>
下划线。所以我将下划线颜色设置post-link
为不透明度 0。悬停时将不透明度设置为 1。
.post-link {
color: #000;
text-decoration: underline solid rgba(12, 11, 10, 0);
transition: text-decoration-color 0.2s;
}
.post-link:hover h1 {
text-decoration: underline;
text-decoration-color: rgba(12, 11, 10, 1);
}
然而,这似乎不起作用。悬停时会出现下划线,但没有过渡效果。