HTML CSS examples for CSS Widget:Hover
Font resizes on hover
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> #upper_menu {<!--from www . java 2s . co m--> background-color:Chartreuse; width:100%; } .container_full { overflow:hidden; margin-bottom:0; padding-bottom:0; } .container_12 { width:93%; margin-left:5%; margin-right:5%; } .container_12 .grid_10 { width:82.334%; } #state_container { padding-top:9.26%; } #state_container ul { margin:0; padding:0; list-style-type:none; } #state_container ul li { display:inline; } #state_container ul li a { text-decoration:none; padding:.3em 2em; color:yellow; font-family:Arial, Helvetica, sans-serif; font-size:2em; text-transform:uppercase; vertical-align:text-top; color:blue; } #state_container ul li a:hover { font-size:2.56em; color:pink; } #state_container ul li .selected_state { font-size:2.56em; color:OrangeRed; } </style> </head> <body> <div id="upper_menu" class="container_full"> <div class="container_12"> <div class="grid_10"> <div id="state_container"> <ul> <li> <a href="#" class="selected_state">Lorem ipsum</a> </li> <li> <a href="#">Lorem ipsum d</a> </li> <li> <a href="#">Lorem ipsu</a> </li> <li> <a href="#">Lorem ip</a> </li> </ul> </div> </div> </div> </div> </body> </html>