Implementation method: 1. Add the "display: none;" style to the element and hide the element first; 2. Use the ":hover" selector and "display:block;" style to set the mouse over display effect , the syntax is "parent element:hover element {display:block;}".
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
css to realize the display and leave-hide effect after the mouse passes over it
Implementation idea:
First put the element Hide;
Then use the ":hover
" selector to set the mouse passing style--display element
implementation Code:
<!DOCTYPE html> <html> <head> <style> div { width: 520px; height: 50px; background-color: #008000; } span{ color: azure; display: none; } div:hover span{ display:block; } </style> </head> <body> <div> <span>hello</span> </div> </body> </html>
Rendering:
(Learning video sharing: css video tutorial)
The above is the detailed content of How to achieve the display and leave-hide effect when the mouse passes through css. For more information, please follow other related articles on the PHP Chinese website!