CODEWITHSUNDEEP
htmlcss
user3214817
user3214817

Reputation: 91

My images start to flash when I point on it (hover)

I have this layout where I want the printer image to switch to another image when I point on it (using hover), but instead it starts to flash when I point on it. I have the same issue in all browsers so I have done something wrong, but what?

<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;
}

Upvotes: 0

Views: 47

Answers (1)

Piotr M&#252;ller
Piotr M&#252;ller

Reputation: 5548

In first class you have top:-15px; but in second top:-150px;, so when hover style comes in - object is transformed and esapes your mouse pointer, becoming non-hovered (returns to orginal under-mouse place) and the loop starts...

Upvotes: 3

Related Questions