How do I maintain the state of a hover on mouse out?

Question

I am trying a transition where a line becomes a long rectangle. I want to make it so that when the transition finishes, the final state remains in place even when the mouse is not hovered on it.

This is my current code:

#line {
    width: 300px;
    height: 1px;
    background-color: darkblue;
    transition: height 2s;
    -webkit-transition: height 2s;
}

#line:hover {
    width: 300px;
    height: 200px;
    background-color: darkblue;
}

<div id="line"></div>

This is definitely a duplicate question, but while I find a good target, the answer is `animation-fill-mode: forwards;` — TylerH, Oct 15 '15 at 19:01
@TylerH That's for an animation. Does it work for transitions too? — GolezTrol, Oct 15 '15 at 19:04
@GolezTrol I think it does, though I don't know about on `:hover`. Anyway it looks like OP isn't actually dealing with animations here; I'll edit the question. — TylerH, Oct 15 '15 at 19:09
@GolezTrol Hey, I have a small follow-up question. What if, instead of hovering my mouse, I want the animation to start after it is clicked? — Asem H, Oct 15 '15 at 19:19
There is no relationship between maintaining the final state of an animation and keeping a transitioned hover state. So, I would answer to @GolezTrol that no, it won't work in this scenario — vals, Oct 15 '15 at 21:08

GolezTrol · Accepted Answer · 2015-10-16T05:13:12.143

4

I think the best solution is to add a small script that adds a class. The class remains after unhovering:

window.addEventListener('DOMContentLoaded', function() {
  document.getElementById('line').addEventListener('mouseover', function(event) {
    document.getElementById('line').classList.add('activated');
  });
});

#line {
  width: 300px;
  height: 1px;
  background-color: darkblue;
  transition: height 2s;
  -webkit-transition: height 2s;
}
#line.activated{
  width: 300px;
  height: 200px;
  background-color: darkblue;
}

<body>

  <div id="line"></div>

</body>

edited Oct 16 '15 at 05:13

answered Oct 15 '15 at 19:02

GolezTrol

114,394
18
182
210

Hey, this seemed to be the solution I was looking for. Thanks – Asem H Oct 15 '15 at 19:11
Same code, but using `click` instead of `mouseover` event. – GolezTrol Oct 15 '15 at 19:18
It's a bit hard to click on a single pixel line, though. Hovering is easier. If you want to make it clickable, you should consider making it a couple of pixels high to start with. – GolezTrol Oct 15 '15 at 19:21
yeah, i'll consider that – Asem H Oct 15 '15 at 19:23
There is a solution using only CSS: make the transition time in the normal state very long, and the transition time in the hover state the 2 s that you want. – vals Oct 15 '15 at 21:12
@vals Dirty, but I like the idea. :) Can you make it into an answer? – GolezTrol Oct 16 '15 at 05:10

score 0 · Answer 2 · answered Oct 16 '15 at 13:21

A tricky way to get this effect only with CSS: set the transition-delay on the element to a huge value. and set it to 0 on the hover state

When you hover, the element changes to the hover state, and this way the transition is immediate.

When you un-hover, there will a 9999s delay before it begins (well, not really for ever, but nobody will notice)

#line {
  width: 300px;
  height: 10px;
  background-color: darkblue;
  -webkit-transition: height 1s 9999s;
  transition: height 1s 9999s;
}
#line:hover{
  width: 300px;
  height: 200px;
  background-color: darkblue;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

<body>
  <div id="line"></div>
</body>

How do I maintain the state of a hover on mouse out?

2 Answers2