how can I reload a "CSS background-image" each time I hover on it?

Question

I'm new as a webmaster as I am asking a question in this web that so often has helped me. My knowledge so far is html, css and VERY, VERY little (atm) of Javascript (jQuery), visual basic, asp.net

As ignorant as I am, I try to avoid Javascript as much as possible and focus a lot on CSS's.

In the web I'm currently working I have the menu links as I always do looking like this:

<div class="linkszima">
            <ul>
                <li class="link1">
                    <a id="A1" runat="server" href="#">
                        <h2>Inicio</h2>
                    </a>
                </li>
                <li class="link2">
                    <a id="A2" runat="server" href="#">
                        <h2>Mantenimiento</h2>
                    </a>
                </li>
                <li class="link3">
                    <a id="A3" runat="server" href="#">
                        <h2>Diseño Web</h2>
                    </a>
                </li>
                <li class="link4">
                    <a id="A4" runat="server" href="#">
                        <h2>Programas</h2>
                    </a>
                </li>
                <li class="link5">
                    <a id="A5" runat="server" href="#">
                        <h2>ERP</h2>
                    </a>
                </li>
                <li class="link6">
                    <a id="A6" runat="server" href="#">
                     <h2>Contacto</h2>
                    </a>
                </li>
            </ul>
        </div>

and the css relative to my question:

.link1 a {
height:55px;          
}
.link1 a:hover {
background-color: transparent; 
background-image:url(../Images/GifDeInicio.gif);    
background-repeat:no-repeat;
background-position:12px 0;   
}

Now it's perfectly working as required except that the animated gif (not a loop) doesn't load again next time you "hover" it.

Are there any way to load the gif every time you hover with just css? if not possible and I need to use jQuery, would anyone being so kind as to explain how to do it step by step? ( I have currently jquery-1.7.1.js loaded but could get another if necessary)

Thanks a lot in advance and excuse my English, please. It's not my first language.

what you're expecting is actually the normal behaviour. You should see it every time you hover. Could you prepare a fiddle showing the issue? — Fabrizio Calderan, Jul 04 '13 at 15:24
There are workarounds if you really want to re-load the image every time you hover - http://stackoverflow.com/questions/2831676/animated-gif-not-working-in-firefox-after-cache This works by appending a random number to the end of the file name, `image.gif?nocache=123` for example, and if that number changes every time on hover - it will reload the image, and not use the `cached` version — Nick R, Jul 04 '13 at 15:28
Sorry, nick, I checked already that question you linked before making mine and it doesn't help me as I will try as much as possible to keep the image on the css file (background image command)as all the work it's already done. Fabrizio, yeah, I see it everytime I hover, but after first time, each new hover just show me the gif with the animation already "done". I would love to explain myself better, apologise. — Alvaro Menéndez, Jul 04 '13 at 15:38
Here you have, not very accurate (the background position) but you can check here what my problem is and why I want each timeI hover to make the gif to reload. http://jsfiddle.net/VSk62/ (note it just work on "inicio" link), I'm atm "photoshoping" the animated gifs for next links) — Alvaro Menéndez, Jul 04 '13 at 15:52
My last comment for today (going home), will check answers tomorrow (if any). I'm just thinking I will use the "onmouseover" command to load that gif... then "Onmouseout" to load a new gif making the "animation" backwards. No idea thoug if next time I "mouseover" I will have same problem. — Alvaro Menéndez, Jul 04 '13 at 15:55

score 1 · Accepted Answer · answered Sep 03 '13 at 20:44

Not just specifically to an li element, if you want to change/reload a background image on some event, try embedding a span or other element inside the main element, and set a background image on that. Then you can replace that element without having to reload an entire stylesheet. Something like this:

<div class="content-element">
    <span class="bg-image-element" style="background-image: url('old.png')"></span>
    <!-- .... other stuff .... -->
</div>

<script>
    $('.some-element').someEvent(function() {
        $('.bg-image-element').replaceWith(<span class="bg-image-element" style="background-image: url('new.png')"></span>
    });
</script>

I have not seen consistent behavior when changing just the css background-image via javascript/jQuery works. But replacing an entire element does seem to force a background image reload.

Just revisiting my old questions when I didn't know much... about anything... and about how this web works. Sorry if it took (some... very long) time to valid it :) — Alvaro Menéndez, Apr 06 '15 at 21:18

score 0 · Answer 2 · answered Jul 05 '13 at 07:48

Well, while on bed I though of the right solution for my problem. I had to NOT use background image and insteed go for html img but works much better as I didn't though at the start using a backward animation gif and now the links will look much better.

I just use the onmouseover and onmouse out commands.

check the result here if you like: http://jsfiddle.net/dN2at/

<li class="link1"> <a id="A1" runat="server" href="#"> <img src="http://s10.postimg.org/j1fbosayt/NADA.png"  onmouseover="this.src='http://s7.postimg.org/tztg228s7/Gif_De_Inicio.gif';" onmouseout="this.src='http://s18.postimg.org/ww2tpxsb9/Gif_De_Inicio_Bis.gif';"/>
                        <h2>Inicio</h2>
                    </a>

    </li>

it is still NOT the solution of the problem, just a fix, but it may help fellow mates around.

Ty for your time and till next time.

Stefan · Answer 3 · 2013-07-05T09:24:34.617

If you want to try jQuery, you can do something like this:

<script type='text/javascript' src='http://code.jquery.com/jquery.min.js'></script>
<script type='text/javascript'>
    // preload images function
    function preload(lst_imgs) {
        $(lst_imgs).each(function() {
            (new Image()).src = this;
        });
    }
    $(document).ready(function() {
        var src = '../Images/GifDeInicio.gif'; 
        // preload background image
        preload([src]);
        // show background image on hover
        $('.link1 a').hover(function() {
            $(this).css('background-image', 'url(' + src + ')');
        });
    });
</script>

As I'm actually learning jquary (but such a newbie at it) I may try it to see how it works. ty :) — Alvaro Menéndez, Jul 05 '13 at 09:26

how can I reload a "CSS background-image" each time I hover on it?

3 Answers3