HTML CSS examples for CSS Widget:Hover to change Color
:hover to change child's font color
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> *, *:before, *:after {<!--from ww w .j a v a 2s.c o m--> -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } a { text-decoration:none; } .animate * { -webkit-transition:0.3s; -moz-transition:0.3s; -o-transition:0.3s; transition:0.3s; } #sidebar nav#menu { width:51%; background:Chartreuse; } #sidebar nav#menu li { width:100%; padding:21px 0 21px 21px; list-style:none; } #sidebar nav#menu li b { display:block; } #sidebar nav#menu li span { display:block; } nav#menu li b { font-size:2.8em; text-align:left; color:yellow; } #sidebar nav#menu li .description { font-size:.10em; text-align:left; color:blue; } #home-btn:hover { border-left:6px solid pink; } #about-btn:hover { border-left:6px solid OrangeRed; } #portfolio-btn:hover { border-left:6px solid grey; } #resume-btn:hover { border-left:6px solid BlueViolet; } #contact-btn:hover { border-left:6px solid Chartreuse; } #home-btn:hover b { color:yellow; } #about-btn:hover b { color:blue; } #portfolio-btn:hover b { color:pink; } #resume-btn:hover b { color:OrangeRed; } #contact-btn:hover b { color:grey; } </style> </head> <body> <div id="sidebar"> <nav id="menu" class="animate"> <a href=""> <li id="home-btn"> <b>Lore</b> <span class="description">Lorem ipsum</span> </li> </a> <a href=""> <li id="about-btn"> <b>Lorem ip</b> <span class="description">Lorem ips</span> </li> </a> <a href=""> <li id="portfolio-btn"> <b>Lorem ips</b> <span class="description">Lorem ipsum dolor sit amet, con</span> </li> </a> <a href=""> <li id="resume-btn"> <b>Lorem </b> <span class="description">Lorem ipsum dolor sit amet, co</span> </li> </a> <a href=""> <li id="contact-btn"> <b>Lorem ipsu</b> <span class="description">Lorem ipsum dolor</span> </li> </a> </nav> </div> </body> </html>