鼠标移开后的悬停效果

Question

我正在尝试学习 HTML/CSS 的基础知识。我在 css 中了解了 :hover，当光标悬停在元素上时，根据编写的代码会发生一些事情。然后，您还可以使用 transition 标记，使转换需要一些时间。但是，当光标离开元素时，它会返回到原始位置，而不会进行过渡，这很糟糕。这是我写的代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <style>
            .required::before {
                content: '';
                display:block;
                width: 10px;
                height: 10px;
                background-color: red;
                border-radius:10px;
            }
            .required::after {
                content: '';
                display:inline-block;
                width: 10px;
                height: 10px;
                background: blue;
                margin-left: -20px;
            }
            .required:hover::after{
                transform: translateX(100px);
                transition: 1s;
            }
        </style>
    </head>

    <body>
        <label class = required>Name</label>
    </body>
</html>

当光标悬停时，立方体以1秒为单位移动。鼠标移出，它立即returns在他的第一个位置。我希望它 returns 在相同数量类型的位置。希望我的描述足够清楚。感谢您的帮助

Answer 1

将 transition 放在 .required::after 中，因为将过渡放在这里会使悬停效果在 :hover 中花费固定的时间 start/end 效果它的开始时间为固定值，但没有指定结束时间。
如果想在修复属性上应用过渡，请在 transition 中的时间之前使用那个属性名称，就像这里一样，您可以编写 transition: transform 1s;，这样 transition 将应用于 transform 属性值

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <style>
    .required::before {
      content: '';
      display: block;
      width: 10px;
      height: 10px;
      background-color: red;
      border-radius: 10px;
    }
    
    .required::after {
      content: '';
      display: inline-block;
      width: 10px;
      height: 10px;
      background: blue;
      margin-left: -20px;
      transition: 1s;/*Put transition here*/
    }
    
    .required:hover::after {
      transform: translateX(100px);
      
    }
  </style>
</head>

<body>
  <label class="required">Name</label>
</body>

</html>

Answer 2

问题是，当用户悬停时，过渡仅为伪元素设置，因此一旦悬停停止，过渡属性将返回默认值 - 即没有过渡。

将该过渡设置移动到非悬停 class 设置意味着无论悬停是否发生，return 也将过渡。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <style>
    .required::before {
      content: '';
      display: block;
      width: 10px;
      height: 10px;
      background-color: red;
      border-radius: 10px;
    }
    
    .required::after {
      content: '';
      display: inline-block;
      width: 10px;
      height: 10px;
      background: blue;
      margin-left: -20px;
      transition: 1s;
    }
    
    .required:hover::after {
      transform: translateX(100px);
    }
  </style>
</head>

<body>
  <label class=r equired>Name</label>
</body>

</html>

Answer 3

除了前面的答案正确地告诉您将转换属性移动到 .required::after，您还需要小心使用没有属性名称的 transform: 1s .默认情况下，这将为 ALL 属性创建转换。

鼠标移开后的悬停效果

Hover effect after mouse out

html

css

hover