Good day.
There is a task: to delay the hide element (second-level menu). How to do it on JS – I guess, but I would like to do with one CSS.
If instead of display use visibility, then all is well:
. Menu.second {
Visibility: Hidden;
OPACITY: 0;
Transition: Visibility 0s Linear 0.5s, Opacity 0.5s Linear;
}
.Menu.second: Hover {
Visibility: visible;
OPACITY: 1;
TRANSITION-DELAY: 0S;
}
But I need to display: block and display: none.
How to implement it?
Answer 1, Authority 100%
You can also WIDTH
and Height
Put 0
, the delay will work, on Display
Transition
does not work out, or apply JS.
Answer 2
- you will not be able to bring the mouse to an element that does not occupy a place in DOM, i.e. Which is
Display: None;
-
Try via
Position: Absolute;
.
those. Somehow so.. Menu.second { Position: Absolute; Visibility: Hidden; OPACITY: 0; Transition: Visibility 0s Linear 0.5s, Opacity 0.5s Linear; } .Menu.second: Hover { Position: static; Visibility: visible; OPACITY: 1; TRANSITION-DELAY: 0S; }
But the problem with the activation of the object (mouse hovering) remains.