< img src=" https://websitedesign-usa.com/wp-content/uploads/2021/03/long-hover.jpg" class=" ff-og-image-inserted" > I had a really awkward CSS minute a few days ago.
I was dealing with the front-end code of a style that had a narrow sidebar of icons. There isn’t adequate space there to reveal text of what the icons are, so the concept is that we’ll utilize available (however aesthetically concealed, by default) text that remains in there currently as a tooltip on a “long hover.” That is, a gadget with a cursor, and the cursor hovering over the aspect for a while, like 3 seconds.
My mind went like this …
- I can use utilize: the tooltip is either noticeable or not noticeable. I’ll handle the state, which will manifest in the DOM as a class name on an HTML element.Then I’ll deal
- with the reasoning for altering that state.The default state will be not noticeable, however if the mouse is inside the component for over 3 seconds, I’ll change the state to noticeable. If the mouse ever leaves the aspect, the state will stay( or ended up being) not noticeable. This was a React job, so state was simply on the mind. That wound up like this: Not that bad, best
the UI in React, however remove all the state management things. All I’ll do is include a transition-delay: threes when the. icon is: hover
that it’s absolutely no seconds when not hovered, then disappears instantly when the mouse cursor leaves). A long hover is generally a one-liner in CSS:< pre rel =" HTML" class=" wp-block-csstricks-code-block language-markup” data-line >. thing. thing: hover * hold-up hover animation just ON,
not OFF * Functions excellent. One issue that isn't attended to here is the touch screen issue. You might argue screen readers are