Css: Hover State Images Cache

CSS: Hover State images cache

If you're trying to avoid having your hover state images only load they they're being hovered on, instead of preloading them, why not create sprites that hold both the normal and hover images ? That way you can be sure that all your hover state images will already be loaded, and at the same time drop the overhead for all the requests. The only thing that you would then need to do, is to set the value of the background-position attribute.

As for your first question, I suppose the best way of finding the answer is to use two large images (a couple of wallpapers would work) and test it yourself, although I suspect that the images will only be loaded when the mouse is over the original image, because that's when the code is being executed.

Hope this helps !

how to stay image constant on hover

I am not sure, but i think you should not apply

background-image:url("http://wstation.inmomundo.com/static02/costarica/sprites_botones1.png");

again on hover, so your hover class should be

 .bac:hover{
background-position:0px -35px; 
}

Edit: Also it is going off because you apply background-image again in hover and google take is as brand new image and take some time to load first time, but after that google pick it from cache and it never goes off again until you reload the page, if your image is in same domain then don't give the full url of image http://wstation.inmomundo.com/static02/costarica/sprites_botones1.png, give the relative path of image like images/sprites_botones1.png

JQuery icon customization and issue with hover state

This may sound obvious but the first thing I think of when a similar thing happens to me is browser cache. To remedy it I try ctrl-refresh, or a different browser. I am surprised how often it helps. I hope your problem is as simple. =]

image flickering on mouseover even when sprites are used for hover image

Have you tried using background-position instead of background?
I'm not seeing the problem you mentioned either, but it may be something to do with essentially redefining the background image on hover.

See :hover state in Chrome Developer Tools

Now you can see both the pseudo-class rules and force them on elements.

To see the rules like :hover in the Styles pane click the small :hov text in the top right.

To force an element into :hover state, right click it and select :hover.

Additional tips on the elements panel in Chrome Developer Tools Shortcuts.

Will the browser cache a CSS background image if it's not used?

I assume by "cache" here, you mean "preload". Actual "caching" has to do with expires headers and the like.

It's entirely based on the browser's behavior and what it chooses to do. However, my experience is that modern browsers don't bother to load an image defined in a CSS file unless the image is actually called for.

This is one reason that some choose to make both the default and hover state of an element into one image, and then use the background-position property to change which is visible. There's a bit more overhead, but there is also no delay between hover and the hover state being displayed, making for a smoother experience.

How to change source of img tag on hover?

With only html and css, its not posible to change the src of image. If you do replace the img tag with div tag, then you might be able to change the image that is set as the background as like

div {
    background: url('http://dummyimage.com/100x100/000/fff');
}
div:hover {
    background: url('http://dummyimage.com/100x100/eb00eb/fff');
}

And if you think you can use some javascript code then you should be able to change the src of the img tag as below

function hover(element) {  element.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff');}
function unhover(element) {  element.setAttribute('src', 'http://dummyimage.com/100x100/000/fff');}

<img id="my-img" src="http://dummyimage.com/100x100/000/fff" onmouseover="hover(this);" onmouseout="unhover(this);" />