Question

I’m setting a map up for when you hover the little orange circles, a fish will come up.
Example can been seen here, http://www.simagine.nl/kaartje

However, if you hover the far right circle, little above Australia, the hover itselfs keeps flickering and therefor the image keeps flickering also.

The CSS for this is:

a.tonijn {
position:absolute;
text-indent:-9999px;
height:10px;
width:10px;
top:156px;
left:355px;
display:block;

}

a.tonijn:hover {
background:url(tonijn.png) no-repeat;
height:83px;
width:106px;
top:65px;
left:329px;

}

Think it’s a silly answer but i can’t find it…

Regards

Answer 1

The rules in a.tonijn:hover changes the area for the a element.

You need to add a child element to you a-tag and apply the background image to that element instead.

Try this:

<a href="tonijn" class="tonijn">Tonijn<span></span></a>

/* Selector changed */
a.tonijn:hover span {
    background: url(tonijn.png) no-repeat;
    height: 83px;
    width: 106px;

    top: -83px; /* Value changed */
    left: -26px; /* Value changed */

    position: absolute; /* Attribute added */
    display: block; /* Attribute added */
}