Эффект наведения курсора мыши после выхода

#html #css #hover

Вопрос:

Я пытаюсь изучить основы HTML/CSS. Я узнал о :наведите курсор в 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 сек. Вынимая мышь, он мгновенно возвращается в свою первую позицию. Я бы хотел, чтобы он возвращался в позицию в том же количестве типов. Надеюсь, я достаточно ясно выразился в своем описании. Спасибо за вашу помощь

Ответ №1:

Введено transition , .required::after потому что включение перехода здесь делает эффект наведения, чтобы занять фиксированное время для начала/окончания эффекта, в то время как его включение :hover делает время начала в качестве фиксированного значения, пока оно не указывает время окончания.
Если вы хотите применить переход к свойству fix, используйте это имя свойства до времени, 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 без имен свойств. По умолчанию это приведет к созданию переходов для ВСЕХ свойств.

Ответ №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>