在悬停过渡后更改输入宽度已结束

Question

我的输入宽度为15em，在悬停时延长

#autocomplete {
  width: 15em;    
}

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

即使在取消悬停时，我也希望保持悬停设置。

我见过这个帖子：Make CSS Hover state remain after "unhovering"，允许在悬停时更改元素的类。

虽然我需要它在3秒后发生，以便过渡不会被打破

Answer 1

查看transition-delay

您可以在悬停

上执行import React from 'react';之类的操作

在评论中 - 这是setTimeout并用于JS延迟，但我不建议使用它太多，因为它会从你的机器占用大量内存。使用CSS可以提高效率。

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

＆＃13;

＆＃13;

#autocomplete:hover {transition-delay:3s;}

＆＃13;

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

input:hover, input:focus  {
  width:100%;
}

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

<input type='text' />

＆＃13;

$("#myinput").one("mouseover", function() {
  $("#myinput").addClass('hovered');
});

＆＃13;

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

input.hovered {
  width:100%;
}

＆＃13;

＆＃13;

＆＃13;