Effect How to - Hover to switch image

Question

We would like to know how to hover to switch image.

Answer


<html>
<head>
</head><!--from  ww  w  .  j  ava  2  s.  c o m-->
<style type="text/css">
.flipimage { 
   border:solid 1px pink; 
   height:65px; width:65px; 
   background-image:url("http://www.java2s.com/style/download.png"); 
} 
.flipimage:hover { 
   border:solid 1px pink; 
   height:65px; width:65px; 
   background-image:url("another.jpg"); 
} 
</style>


<body>
    <div class="flipimage"></div>
</body>
</html>

The code above is rendered as follows: