鼠标移出后的悬停效果答案

【问题标题】：Hover effect after mouse out鼠标移出后的悬停效果
【发布时间】：2021-09-17 20:15:53
【问题描述】：

我正在尝试学习 HTML/CSS 的基础知识。我了解到 :hover 在 css 中，当光标悬停在元素上时，根据编写的代码发生了一些事情。然后，您也可以使用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 秒的间隔移动。鼠标移开，它立即返回到他的第一个位置。我希望它以相同数量的类型返回位置。希望我的描述足够清楚。感谢您的帮助

【问题讨论】：

尝试class="required" 而不是class = required。不带引号的 HTML 会导致一些问题。

标签： html css hover

【解决方案1】：

将transition 放在 .required::after 中，因为将过渡放在此处会使悬停效果花费固定的时间来开始/结束效果，而将其放在:hover 中使其开始时间为固定值，而它不会' t 指定结束时间。
如果想在修复属性上应用转换，请在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>

【讨论】：

【解决方案2】：

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

【讨论】：

是的，你是对的 transition: transform 1s; 将应用于修复属性值

【解决方案3】：

问题在于，当用户悬停时仅为伪元素设置过渡，因此一旦悬停停止，过渡属性就会恢复默认值 - 即没有过渡。

将该过渡设置移动到非悬停类设置中意味着无论悬停是否发生都在那里，因此返回也将过渡。

<!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>

【讨论】：