CODEWITHSUNDEEP
cssimagerollover
user1526693
user1526693

Reputation: 221

Image rollover using css background image

I have explored alternative methods for creating image rollover effects (both CSS & javascript). In the process I have encountered unexplained behavior using one particular CSS method:

.main-banner a#link1{
    background-image: url(images/yellow-button_03.png);
    background-repeat: no-repeat;   
    width:310px;
    height:85px;
    top:190.2px;
    left:277px;
} 

.main-banner a:hover#link1{

    background-image: url(images/yellow-button-bright_03.png);
    background-repeat: no-repeat;

}

This method creates a hotspot with background image. on mouse-over the image is replaced with a different colored button with the exact same dimensions.

On the first mouse-over there is an extremely slight flicker as the rollover image is initialized for the first time only. The event only occurs subsequent to the first cache of the stylesheet.

My question is as follows:

Given that the CSS is completely loaded why does this behavior occur?

The behavior would indicate that the css background rollover image is not loaded until the initial mouse-over event? However this is not the case.

Please do not provide an alternative solution for replicating rollover functionality. This is not the question.

I am only interested in understanding why there is a slight flicker upon first rollover. Thanks.

Upvotes: 0

Views: 3434

Answers (2)

Chandrakant
Chandrakant

Reputation: 1981

.main-banner a#link1:hover{

    background-image: url(images/yellow-button-bright_03.png) no-repeat;

}

Generally pseudo classes written after selector, a or a#link1 is selector so you should write a#link1:hover

Checkout this http://jsfiddle.net/d5RpE/1/

@Tuanderful - exactly so in this condition we can use "image spriting", so that when first time :hover event will occur - image will not fluctuate

Upvotes: 1

Tuanderful
Tuanderful

Reputation: 1319

Although the CSS has completely loaded, I don't think all of the elements referenced in the CSS are loaded until needed. In other words, yellow-button_03.png is loaded to render the link when the page first loads, but i believe yellow-button-bright_03.png only loads after you hover over the link.

Upvotes: 0

Related Questions