Home css DISPLAY DISPLAY: NONE

DISPLAY DISPLAY: NONE

Author

Date

Category

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

  1. 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;
  2. 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.

Programmers, Start Your Engines!

Why spend time searching for the correct question and then entering your answer when you can find it in a second? That's what CompuTicket is all about! Here you'll find thousands of questions and answers from hundreds of computer languages.

Recent questions