In web pages, we often see things that are not present at the beginning of the page when the mouse is rolled over, such as the secondary menu, or when the mouse is rolled over an image, the effect fades in and out. Q: So how does this reality and concealment work? There are many ways to do this, but let me walk you through each and the differences

Either way, first of all this thing has to exist, we have to exist in the structure

The primary navigation

Secondary navigation Secondary navigation secondary navigation

We want to show only the first level of navigation and the second level of navigation when the mouse moves up the first level

Display :none; And display: block; Way to achieve

We start by giving the p tag a display: None;

Hover p{display:block; hover p{display:block; }

Note: this method can be used for show and hide effects, but does not support transition effects, which means you cannot see gradual display

Opacity: 0; Opacity: 1 is implemented

Opacity :0;

Div :hover p{opacity:1; }

Note: This mode can be shown and hidden, and supports the transition effect, adding a transition to the initial state of the P tag :1s; You can see the effect of fading in and out of nothing

Height: 0; Height: 100px

Start by adding height:0 to the p tag; However, there will be overflow due to the contents of the secondary menu text, add a overflow: hidden to solve the problem

Hover p{height:100px; hover p{height:100px; }

Note: This mode can be shown and hidden, and supports the transition effect, adding a transition to the initial state of the P tag :1s; You can see something like a rolling door pulling down.

Ha ha is not learned, good don’t say, old iron people look at the way, anyway I told you the way, is to collect or like.