html - 每次悬停在它上面时如何重新加载 "CSS background-image"？

Question

我是一名新的网站管理员，因为我在这个网站上提出了一个经常对我有帮助的问题。到目前为止，我的知识是 html、css 和非常非常少的 Javascript (jQuery)、visual basic、asp.net

虽然我很无知，但我尽量避免使用 Javascript，而主要关注 CSS。

在我目前工作的网络中，我有菜单链接，因为我总是这样看:

<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> 

以及与我的问题相关的 css:

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

现在它完全可以按要求工作，除了动画 gif(不是循环)在您下次“悬停”它时不会再次加载。

有什么方法可以在每次悬停时只用 css 加载 gif 吗？如果不可能，我需要使用 jQuery，有人会如此友好地解释如何一步一步地做吗？ (我目前已经加载了 jquery-1.7.1.js，但如果需要的话可以得到另一个)

非常感谢，请原谅我的英语。这不是我的第一语言。

Answer 1

不仅仅是针对 li 元素，如果你想在某个事件上更改/重新加载背景图像，请尝试在主元素中嵌入一个 span 或其他元素，并在那。然后您可以替换该元素而无需重新加载整个样式表。像这样:

<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>

当仅通过 javascript/jQuery 更改 css 背景图像时，我没有看到一致的行为。但是替换整个元素似乎确实会强制重新加载背景图像。