0

作为一名网站管理员，我是新来的，因为我在这个网站上提出了一个经常帮助我的问题。到目前为止，我的知识是 html、css 和非常非常少 (atm) 的 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，但如果需要，可以获取另一个）

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

4

3 回答 3

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 背景图像时，我没有看到一致的行为。但是替换整个元素似乎确实会强制重新加载背景图像。

于 2013-09-03T20:44:34.250 回答
0

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.

于 2013-07-05T07:48:36.663 回答
0

如果你想尝试 jQuery，你可以这样做：

<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>
于 2013-07-05T09:11:18.420 回答