文字装饰过渡效果

Question

我正在尝试将

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);
    }

但是，这似乎不起作用。悬停时会出现下划线，但没有过渡效果。

Answer 1

要实现悬停时文本装饰颜色的过渡效果，您应该将过渡属性应用于

.post-link

类而不是

text-decoration-color

。这是更正后的 CSS：

.post-link {
  color: #000;
  text-decoration: underline solid rgba(12, 11, 10, 0);
  transition: text-decoration-color 0.2s; /* Add transition here */
}

.post-link:hover h1 {
  text-decoration-color: rgba(12, 11, 10, 1);
}

这样，当鼠标悬停在链接上时，过渡效果将平滑应用。