将“过渡”效果应用于无法正常工作的 <a> 元素答案

【问题标题】：Applying 'transition' effect to <a> elements not working properly将“过渡”效果应用于无法正常工作的 <a> 元素
【发布时间】：2022-02-15 16:26:57
【问题描述】：

以下是我正在开发的网站的一些 HTML 代码：

.container {
    display: flex;
    flex-direction: row;
    position: relative;
    top: 10%;
    width: 25vw;
    min-width: 428px;
    height: auto;
    padding: 15px;

    justify-content: left;
    align-items: center;
    
    background-color: white;
}

.container a {
  color: black;
  margin-left: 10px;
  text-decoration: none;
  transition: all ease-in-out 0.25s;
}

.container a h2:hover {
  text-decoration: underline;
}

.container a img {
    width: 100px;
    height: auto;
}

.container + .container {
  margin-top: 20px;
}

<body>
  <div class="main">
      <h1>Contact</h1>
      <p>In need of a commission? Do you just want to talk? Let me know by shooting me an email or DMing me on Instagram.</p>
      <div class="container">
        <a href="https://www.instagram.com/bellapfisterphotography" target="_blank"><img src="./insta.png"></a>
        <a href="https://www.instagram.com/bellapfisterphotography" target="_blank"><h2>@bellapfisterphotography</h2></a>
      </div>
      <div class="container">
        <a href="mailto:mail@gmail.com"><img src="./email.png"></a>
        <a href="mailto:mail@gmail.com"><h2>mail@gmail.com</h2></a>
      </div>
  </div>

由于某种原因，我应用到容器元素的下划线过渡没有按预期运行。任何有关解决此问题或解释为什么会发生这种情况的帮助将不胜感激。

【问题讨论】：

使用<h2> 代替<a> 被认为是无效的HTML。

标签： html css

【解决方案1】：

您必须在 after 或 before 下划线，并以高度或宽度对其进行动画处理如你所愿您的代码必须更改如下（将此部分添加到您的代码中）：

.container a h2
{
  position:relative ;
}

.container a h2::after
{
  position:absolute ;
  width:100%;
  height: 0px ;
  background:#000 ;
  bottom:-5px ;
  left:0 ;
  content : " " ;
  transition: all ease-in-out 0.25s;
}

.container a h2:hover::after {
   height: 5px ;
}

【讨论】：

【解决方案2】：

悬停元素必须是具有过渡属性的元素。
我还建议您将:hover 移动到<a> 标记。

试试这个：

.container a h2 {
  transition: all ease-in-out 0.25s;
}

.container a:hover h2 {
  text-decoration: underline;
}

【讨论】：

【解决方案3】：

那是因为您将text-decoration 应用于两个不同的元素：

.container a {
  ...
  text-decoration: none;
}

.container a h2:hover {
  text-decoration: underline;
}

text-decoration 是 text-decoration-line、text-decoration-color、text-decoration-style 和 text-decoration-thickness 属性的简写。而text-decoration: none 实际上就是text-decoration-line: none。

但您不能对text-decoration-line 和text-decoration-style 进行有意义的动画处理。您只能对text-decoration-color（插值）和text-decoration-thickness 进行有意义的动画处理。

因此，在您的情况下，您可以最初将文本装饰设置为透明，然后在悬停时更改。您也可以为厚度设置动画，从 text-decoration-thickness: 0; 开始。

.email-address {
  text-decoration-thickness: from-font;
  text-decoration-color: transparent;
}

.email-address:hover {
  text-decoration-thickness: 1px;
  text-decoration-color: currentColor;
  transition: all ease-in-out 0.25s;
}

.email-2:hover {
  text-decoration-thickness: 4px;
  text-decoration-color: red;
  transition: all ease-in-out 0.5s;
}

.email-3:hover {
  text-decoration-thickness: 2px;
  text-decoration-color: green;
  transition: all ease-in-out 1s;
}

<ul>
  <li>
    <a class="email-address email-1" href="#">email1@acme.com</a>
  </li>
  <li>
    <a class="email-address email-2" href="#">email2@acme.com</a>
  </li>
  <li>
    <a class="email-address email-3" href="#">email3@acme.com</a>
  </li>
</ul>

补充参考：

https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration

【讨论】：