My layout is set up so that when I hover over the printer image, it should switch to another image. However, instead of smoothly transitioning, the image starts to flash. This issue occurs in all browsers, indicating that I have made a mistake somewhere. Can you help me identify what went wrong?
<a href="http://" class="printer" target="_new"></a>
a.printer:link, a.printer:visited{
width: 30px;
height: 30px;
background-image: url(images/printerblue.png);
background-size:100% 100%;
position: absolute;
left: 150px;
top:-15px;
}
a.printer:hover{
width: 30px;
height: 30px;
background-image: url(images/printergreen.png);
background-size:100% 100%;
position: absolute;
left: 150px;
top:-150px;
}