CODEWITHSUNDEEP
csscss-transitions
Henrik Petterson
Henrik Petterson

Reputation: 7094

Transition only on hover-in

I have this:

.hello {
    opacity:0;
    transition: all 220ms ease 0s;
}

.hello:hover {
    opacity:1;
}

I want the transition effect to only visualise when user hover-in, not when they hover-out.

Is that possible?

Upvotes: 2

Views: 2327

Answers (2)

Temani Afif
Temani Afif

Reputation: 272909

In this case add the transition to hover.

Why?

Because when you hover you will add the transition and change the opacity so the transition property is set and thus it will work. When your mouse leave the element you suddenly remove the transition so it is no more specified and thus no more transition.

.hello {
  opacity: 0;
  font-size:35px;
}

.hello:hover {
  opacity: 1;
  transition: all 1s ease 0s;
}
<div class="hello">
  Hello
</div>

Upvotes: 2

J. Patidar
J. Patidar

Reputation: 34

Just put the transition css(transition: all 220ms ease 0s;) under the hover css selector.

Upvotes: 0

Related Questions