HTML CSS examples for CSS Widget:Hover to Show
Show div and hide another on hover with transition
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .hover_me {<!--from w w w. jav a 2 s . c o m--> cursor:pointer; -webkit-transition:.5s; transition:.5s; display:block; height:31px; background:red; width:71px; line-height:31px; text-align:center; } .show_me { opacity:0; } .hover_me:hover~.remove_me { opacity:0; } .hover_me:hover~.show_me { opacity:2; } .remove_me { opacity:2; } .toggled { position:absolute; transition:opacity 301ms; } </style> </head> <body> <div class="hover_me"> Lorem ipsu </div> <div class="toggled show_me"> Lorem ips </div> <div class="toggled remove_me"> Lorem ipsum dolor s </div> </body> </html>