CODEWITHSUNDEEP
htmlcsshover
user14932448
user14932448

Reputation:

Hover effect after mouse out

I am trying learning basics of HTML/CSS. I learned about :hover in css, that when the cursor is hover the element, something happend according to the code written. Then, you can also use transition tag, to make the transformation take some time. But, when the cursor goes out of the element, it comes back to the original position, without making the transition, and that is horrible. Here is the code I wrote

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

When cursor hover, the cube moves, in a rime of 1s. Mouse out, it instantly returns in his first position. I would like that it returns in the position in the same amount of type. Hope I'm enought clear in my description. Thanks for your help

Upvotes: 3

Views: 957

Answers (3)

Yupma
Yupma

Reputation: 2546

Put transition in .required::after because putting transition here make the hover effect to take a fix amount of time for start/end of effect while putting it in :hover make its start time as fix value while it don't specify its end time.
If want to apply transition on fix property use that property name before time in transition like here you can write transition: transform 1s; so transition will be applied on transform property value

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

Upvotes: 2

Kristian Nilsson
Kristian Nilsson

Reputation: 28

In addition to previous answers, which correctly tells you to move the transition property to .required::after, you also need to be careful using transform: 1s without property names. By default this will create transitions for ALL properties.

Upvotes: 1

A Haworth
A Haworth

Reputation: 36512

The problem is that the transition is set only for the pseudo element when the user is hovering so as soon as the hover stops the transition property goes back to the default - i.e. no transition.

Moving that transition setting into the non-hovered class setting means it is there whether hovering is takng place or not so the return will also 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;
      transition: 1s;
    }
    
    .required:hover::after {
      transform: translateX(100px);
    }
  </style>
</head>

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

</html>

Upvotes: 0

Related Questions