The code is as follows:
1 <! DOCTYPE html>2 3 4 <meta charset= "UTF-8" >5 <title></title>6 <style type= "Text/css" >7 . the{8 Background-color:Aqua;9 width:500px;Ten Height:200px; One} A /*The default threediv is hidden.*/ - . Three{ - Background-color:Black; the width:100px; - Height:300px; - float: Right; - Visibility:Hidden; +} - /*moving the mouse to Twodiv will change the threediv visibility*/ + . Two:hover>.three{ A Visibility:Visible; at} - </style> - - <body> - <!---the mouse pointer to the div----> - <div class= "both" > in <!---The default hidden div----> - <div class= "three" > to </div> + </div> - </body> the
The difference between dispaly and visibility
Dispaly----The Bolck property can turn row-level elements into block-level elements, dispaiy hidden elements are not placeholders. Visibility----when visibility is set to "hidden", the element is hidden, but it still occupies its original position.
CSS navigation bar mouse hover when the drop-down menu appears