0

I have an input width a width of 15em, which is extended on hover

#autocomplete {
  width: 15em;    
}

#autocomplete:hover {
  width: 100%;
  transition: width 3s;
}

I would like to keep the on hover settings even when unhovering.

I have seen this thread : Make CSS Hover state remain after "unhovering" which allows to change the class of an element on hovering.

Though I need it to happen after 3s so that the transition is not broken

Maxence
  • 2,029
  • 4
  • 18
  • 37

1 Answers1

2

Check out transition-delay

You could do something like #autocomplete:hover {transition-delay:3s;} on the hover

As in the comments - this is setTimeout and used for JS delays, though I wouldn't recommend using it too much as it'll take up a lot of memory from your machine. You'll be a lot more efficient using CSS.

https://www.w3schools.com/jsref/met_win_settimeout.asp

input {
  width:100px;
  transition: 3s;
}

input:hover, input:focus  {
  width:100%;
}
<input type='text' />

$("#myinput").one("mouseover", function() {
  $("#myinput").addClass('hovered');
});
input {
  width:100px;
  transition:3s;
}

input.hovered {
  width:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type='text' id='myinput'/>
MattJHoughton
  • 1,040
  • 13
  • 19
  • not sure it will work. The delay is for the javascript to kick in so that transition happens first – Maxence Jun 28 '17 at 23:33
  • You can use setTimeout for js delays. But try the CSS first. If you're adding a class with JS you should be able to handle the delay in CSS and that'd be a lot smoother for performance. – MattJHoughton Jun 28 '17 at 23:36
  • well, I don't want my transition to start 3seconds after hovering. I want it to start on hovering. And keep width as 100% after hovered. I tried implement `settimeout` but with no luck. – Maxence Jun 28 '17 at 23:47
  • Not really sure what you mean, so I just chucked two examples of things I think you're trying to do. The first one will close again when it's not in use too. Hope that helps, good luck. – MattJHoughton Jun 28 '17 at 23:58