Is it possible using only CSS to expand an item when a user hovers on an item, and keep it this way until the user hovers on another item?
I have tried transitions, which will expand and remain open or expand and close, but not expand, wait for another action, and then re-close the item.
<html>
<ul id="menu">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</html>
#menu {
font-size: 0px;
line-height: 10px;
background: #eee;
}
#menu li{
font-size: 0px;
line-height: 10px;
transition:0s 180s;
}
#menu li:hover {
font-size: 10px;
line-height: 12px;
transition:0s;
}
#menu ul:hover {
font-size: 0px;
line-height: 12px;
transition:0s;
}
The
:hoverpseudo class applies for the duration that a pointer is over an element.If the user leaves the element, they aren't hovering it anymore. So ,the short answer is no.
You could use animations to delay the effect. Instead of actually keeping the element visible, even after the cursor leaves, you could put an animation on it that just adds a delay before it closes.
If you applied an animation to both the hover state, and the normal state, that may help. But, if your hover effect is changing something from
display:nonetodisplay:block, you won't get any help sincedisplayis not animatable. You'd need to use something likevisibilityorheight.