我是网站管理员的新手,因为我在网上提出一个经常帮助我的问题。到目前为止,我的知识是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,但如果有必要可以获得另一个)
非常感谢,请原谅我的英语。这不是我的第一语言。
答案 0 :(得分: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 background-image时,我没有看到一致的行为。但是替换整个元素确实会强制重新加载背景图像。
答案 1 :(得分:0)
嗯,虽然在床上我虽然能解决我的问题。我不得不使用背景图像和insteed去获取html img,但效果要好得多,因为我没有在开始时使用向后动画gif,现在链接看起来会好得多。
我只使用onmouseover和onmouse out命令。
如果您愿意,请在此处查看结果: 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>
它仍然不是问题的解决方案,只是修复,但它可以帮助伙伴们。
Ty为你的时间,直到下一次。
答案 2 :(得分: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>