HTML CSS examples for CSS Widget:Hover
Moving div using hover
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> * {<!--from w w w . j ava2s . c om--> margin:0; padding:0; } #start_bar { height:31px; margin:0 auto; max-width:1921px; background-color:Chartreuse; min-width:481px; width:100%; position:absolute; bottom:0px; left:0px; } #start_button { height:49px; width:49px; background-image:url('https://www.java2s.com/style/demo/Google-Chrome.png'); color:yellow; } #start_button:hover { height:49px; width:49px; background-image:url('https://www.java2s.com/style/demo/Google-Chrome.png'); } #nav { display:none; } #start_button:hover>#nav { display:block; width:71px; height:132px; margin-top:-151px; background-color:blue; } </style> </head> <body> <div id="start_bar"> <div id="start_button"> Lorem <div id="nav"> Lorem ipsum d </div> </div> </div> </body> </html>