CODEWITHSUNDEEP
htmlcss
Jeroenttje
Jeroenttje

Reputation: 89

Flickering background on hover

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

Upvotes: 0

Views: 163

Answers (3)

Johan
Johan

Reputation: 19072

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 */
}

Upvotes: 2

Eric Goncalves
Eric Goncalves

Reputation: 5353

When you hover you are changing the styles for the anchor tag. I would suggest creating a div that is set to 'visibility: hidden' then on a.tonijn:hover set that same div to 'visibility: visible'

Upvotes: 2

Mr. Alien
Mr. Alien

Reputation: 157334

Try giving a border to your link and see it's too small to be hovered, so increase the size, see the red border I have made, I just increased the height and width of your link like

height: 20px;
width: 20px;

And place it correctly around your orange circle in such a way that orange circle comes in the center of the box, and than you are good to go

enter image description here

Upvotes: 1

Related Questions