HTML CSS examples for CSS Widget:Hover
CSS getting hover state to behave on div
<html lang="en"> <head> <style> .green {<!--from w w w .j a v a2 s .c o m--> background:Chartreuse; } .item { width:301px; margin-bottom:6px; } .item a { display:block; height:99px; overflow:hidden; text-decoration:none; } .item a h4, .item a p { height:99px; line-height:99px; padding-left:16px; } .item a h4 { margin:0; width:151px; } .item a img { float:right; height:99px; } .item a p { margin:0; display:none; } .item a:hover h4, .item a:hover img { display:none; } .item a:hover p { display:block; } </style> </head> <body translate="no"> <div class="item green"> <a href="#"> <img src="https://www.java2s.com/style/demo/Firefox.png"> <h4>Lorem i</h4> <p>Lorem ipsum dolor sit amet,</p> </a> </div> <!-- /item --> </body> </html>