Use hover to modify other elements and hover to modify elements

Use hover to modify other elements and hover to modify elements

Hover, we all know, is a pseudo class of the monitoring component "Hovering state.

Generally, we use hover to modify the background of components and rarely involve complicated operations. That is to say, we generally only change the style of the elements with the hover pseudo class, for example:

<Form name = "register" method = "post"> <p> <label for = "name"> name: </label> <input type = "text" name = "name"/> </p> <label for = "password"> original password: </label> <input type = "password" name = "password"/> <span> (the password is 6-20 bytes in length. Leave it blank without modification) </span> </p> </form>

. Form p {/* vertical center */line-height: 50px; height: 50px; border-bottom: 1px dashed # CCC; font-size: 14px; font-family: "";}. form p: hover {/* When the mouse is suspended, change the background color */background-color: # FFE8E8 ;}. form span {display: none ;}. form p: hover span {/* When the mouse is suspended, the content in the span is displayed */display: inline ;}

In the above Code, we added the hover pseudo class for the p tag. When the mouse is suspended, the background color is changed andP labelIs displayed.

However, if the span label is definedP tag outsideAnd hover the mouse over the p tag. What should we do if we want to display the span content?

Css provides a "+" to represent the sibling element.

Note: The sibling element must have the same parent node and be closely adjacent to each other (no other label exists between them).

We can use this method to modify the code just now:

<Form name = "register" method = "post"> <p> <label for = "name"> name: </label> <input type = "text" name = "name"/> </p> <label for = "password"> original password: </label> <input type = "password" name = "password"/> </p> <span> (the password is 6-20 bytes in length. Leave it blank without modification) </span> </form>

We took the span tag from p andClosely following pThe tag is placed behind it.

.form p:hover + span {    display: inline;}

Modify the preceding hover pseudo class for span to this (in fact, a "+" number is added ).

In this way, the operation is successful.