更改輸入寬度上懸停過渡已經結束

Question

後，我有一個輸入寬度15em的寬度，這是在懸停

#autocomplete { 
    width: 15em;  
} 

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

我想unhovering即使保持懸停設置擴展。

我已經看到了這個線程：Make CSS Hover state remain after "unhovering"它允許改變徘徊的元素的類。

雖然我需要它，這樣的轉變是不破3秒後發生

Answer 1

退房transition-delay

你可以在懸停

---

這樣做#autocomplete:hover {transition-delay:3s;}正如評論 - 這是setTimeout並用於JS延遲，但我不建議使用它太多，因爲它會佔用您計算機的大量內存。使用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'/>