Hover Off Transition CSS

What is the opposite of :hover (on mouse leave)?

If I understand correctly you could do the same thing by moving your transitions to the link rather than the hover state:

ul li a {
    color:#999;       
    transition: color 0.5s linear; /* vendorless fallback */
    -o-transition: color 0.5s linear; /* opera */
    -ms-transition: color 0.5s linear; /* IE 10 */
    -moz-transition: color 0.5s linear; /* Firefox */
    -webkit-transition: color 0.5s linear; /*safari and chrome */
}

ul li a:hover {
    color:black;
    cursor: pointer;
}

http://jsfiddle.net/spacebeers/sELKu/3/

The definition of hover is:

The :hover selector is used to select elements when you mouse over
them.

By that definition the opposite of hover is any point at which the mouse is not over it. Someone far smarter than me has done this article, setting different transitions on both states - http://css-tricks.com/different-transitions-for-hover-on-hover-off/

#thing {
   padding: 10px;
   border-radius: 5px;

  /* HOVER OFF */
   -webkit-transition: padding 2s;
}

#thing:hover {
   padding: 20px;
   border-radius: 15px;

  /* HOVER ON */
   -webkit-transition: border-radius 2s;
}

Hover off transition css

Your answer

You have added the transition property on the hover state of the element. Therefore the transition is not applied when you leave the cursor from the element.

.shape1{
    position: absolute;
    background: red;
    top: 512px;
    width: 180px;
    height: 140px;
    transition: .2s ease; /* move this here from :hover */
}

Further information

Besides this you can also add specific properties to the transition. For example, if you only want the height to be animated you could it like this:

.shape1 {
    transition: height .2s ease;
    /* this inly affects height, nothing else */
}

You can even define different transition-times for each property:

.shape1 {
    transition: height .2s ease, background-color .5s linear;
    /* stacking transitions is easy */
}

Force transition to complete on hover CSS

a CSS only solution by adding this code:

.popup-button-ctr:hover::before {
  content:"";
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  animation:h calc(var(--transition-time) + var(--transition-delay)) forwards;
}
@keyframes h {
  99.9% {bottom:0;}
  100% {bottom:100%}
}

This will increase the hoverable area to the whole screen to make sure you will keep the hover effect until the end of transition.

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p&display=swap');
:root {
  --init-bubble-padding: 0px;
  --bubble-padding: 10px;
  --triangle-height: 12px;
  --transition-delay: 0ms;
  --transition-time: 400ms;
}

* {
  font-family: 'M PLUS 1p', Verdana, Geneva, Tahoma, sans-serif;
  z-index: 100;
}

.popup-button-ctr {
  display: inline-block;
  position: relative;
  outline: 0px solid red;
}

.button-ctr button {
  background-color: rgba(30, 30, 30, 1);
  border: none;
  border-radius: 5px;
  outline: 0px solid rgb(90, 90, 90);
  font-weight: 900;
  color: rgb(205, 205, 205);
  padding: 8px 10px 8px 10px;
}

.button-ctr button:hover {
  color: white;
  cursor: pointer;
  background-color: rgba(50, 50, 50, 1);
}

.triangle-up,
.triangle-right,
.triangle-down,
.triangle-left {
  pointer-events: none;
  display: relative;
  position: absolute;
  text-shadow: 1px 1px 10px rgba(21, 36, 63, 0.4);
  z-index: 50;
  color: rgba(255, 0, 0, 1);
  background-color: transparent;
  opacity: 0;
  visibility: hidden;
  transform: scale(0);
  transition: var(--transition-time) ease-in-out;
  transition-delay: var(--transition-delay);
  transition-property: opacity, visibility, transform, top, right, bottom, left;
}

.popup-posr-up,
.popup-posr-right,
.popup-posr-down,
.popup-posr-left {
  width: 0;
  height: 0;
  z-index: 150;
  position: absolute;
}

.popup-posr-down {
  left: 50%;
}

.popup-button-ctr .triangle-down {
  transform: rotate(0deg) translateX(-50%);
  top: var(--init-bubble-padding);
}

.popup-button-ctr:hover .triangle-down {
  transform: rotate(0deg) translateX(-50%);
  opacity: 1;
  visibility: visible;
  transition: var(--transition-time) ease-in-out;
  transition-delay: var(--transition-delay);
  top: var(--bubble-padding);
}

.popup-button-ctr:hover::before {
  content:"";
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  animation:h calc(var(--transition-time) + var(--transition-delay)) forwards;
}
@keyframes h {
  99.9% {bottom:0;}
  100% {bottom:100%}
}

<div class="popup-button-ctr">

  <div class="button-ctr">
    <button>
        <div style="font-size: 30px">
            Emoji Button
        </div>
        This button has emojis <br />
        Let's ROCK br>    </button>
  </div>

  <div class="popup-posr-down">
    <div class="triangle-down">
      ▲
    </div>
  </div>

</div>

Can I apply a CSS transition on hover-out only?

Here's one way to achieve this (put a bogus property none for transition property in :hover):

#inner2{
    opacity:0;
    transition:opacity 2000ms;
}
#outer:hover #inner2{
    opacity:1;
    transition:none;
}

http://jsfiddle.net/j716sbav/4/

Answer updated to incorporate @BoltClock's suggestion. Putting none instead of a bogus property is definitely more elegant.

Hover off transition is not working

Since you add the border to child only when the parent is hovered, it disappears immediately when the hover end. You can add the border to the child with a transparent color, and change the color when hovered.

btw - unless the transitions change when hovered, you can set them only on the elements, no need to include them again on the hovered state.

body {  margin-left: 300px;}
.parent {  padding: 5px;  border-width: thin;  border-style: solid;  font-size: 15px;  position: relative;  display: inline-block;  -webkit-transition: all .3s ease-in-out;  -moz-transition: all .3s ease-in-out;  -o-transition: all .3s ease-in-out;  -ms-transition: all .3s ease-in-out;  transition: all .3s ease-in-out;}
.parent:hover {  border-bottom-color: transparent;  padding-bottom: 30px;}
.child {  position: absolute;  height: 0px;  width: 100%;  bottom: 0;  right: -1px;  -webkit-transition: all .3s ease-in-out;  -moz-transition: all .3s ease-in-out;  -o-transition: all .3s ease-in-out;  -ms-transition: all .3s ease-in-out;  transition: all 0.3s ease-in-out;  border: transparent solid thin;  border-top-style: none;}
.parent:hover .child {  height: calc(240px - 100%);  bottom: calc(-240px + 100%);  width: 240px;  border-color: black;}

<div class="parent">  Login  <div class="child">  </div></div>

Is it possible to prevent a CSS transition reversing off hover?

Yes, it is indeed. The trick is to make the width transition out take 0s with a delay of 1s.

html,
body {
  margin: 0;
  padding: 0;
}

a.btn--tertiary {
  padding-left: 0;
  padding-right: 0;
  background-color: transparent;
  color: #000;
  border: 0;
  position: relative;
  padding-bottom: 5px;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 40px;
}

.btn--tertiary::before {
  content: '';
  height: 2px;
  right: 0;
  width: 100%;
  background: #000;
  position: absolute;
  bottom: 0;
  transition: width 0s;
  z-index: 2;
  border-left: 10px solid transparent;
}

.btn--tertiary::after {
  content: '';
  height: 2px;
  left: 0;
  right: auto;
  width: 0%;
  background: grey;
  position: absolute;
  bottom: 0;
  opacity: 0;
  transition: opacity .5s, width 0s .5s;
  z-index: 3;
}

.btn--tertiary:hover:before,
.btn--tertiary:focus:before {
  width: 0%;
  border-left: 20px solid $white;
  transition: width 1s cubic-bezier(0.100, 0.600, 0.350, 1.000) 0s;
}

.btn--tertiary:hover::after,
.btn--tertiary:focus::after {
  right: 0;
  width: 100%;
  opacity: 1;
  transition: opacity 0s, width 1s cubic-bezier(0.100, 0.600, 0.350, 1.000) 0.1s;
}

<a href="#" class="btn--tertiary">Button</a>

CSS Hover - Fade in on hover, Disappear instantly off hover

You can give transition to hover state only, by default it was given to all states.

Once you'll use it for :hover, transition will occur only for mouseover, not for mouseout.

.invisible {
  opacity: 0;
}

div {
  cursor: pointer;
}

div:hover .invisible {
  opacity: 100%;
  transition: 1s; /* moved this */
}

<div>
  <p>Hover Here</p>
  <p class="invisible">Now you see me</p>
</div>

CSS Hover Out / Mouse Out Transition?

I set the opacity of the div to zero so it won't be visible but it's still a in display mode block and when your mouse is out of the element it's start to fade out as you wanted.

Add this to your css:

.top-links li.music:hover + div.musictest {

       opacity:1;
       transition: opacity 0.1s;
       -moz-transition: opacity 0.1s;
       -webkit-transition: opacity 0.1s;
       -o-transition: opacity 0.1s;
    }

  .top-links li.music + div.musictest {
       opacity:0;
       display:block;
       transition: opacity 2s;
       -moz-transition: opacity 2s;
       -webkit-transition: opacity 2s;
       -o-transition: opacity 2s;
    }

And here is a working example

---

Related Topics