javascript - li 鼠标悬停的动态 id

Question

<script type="text/javascript" >
    $('li').mouseout(function () {
        divId = $(this).attr('id');
        $(this).css('background', 'url(assets/images/clients/logo/' + divId + '.jpg)');
    });
    $('li').mouseover(function () {
        divId = $(this).attr('id');
        $(this).css('background', 'url(assets/images/clients/logo-gc/' + divId + '.jpg)');
    });
    $('li').load(function () {
        divId = $(this).attr('id');
        $(this).css('background', 'url(assets/images/clients/logo/' + divId + '.jpg)');
    });
</script>

我犯了什么错误？页面加载后启动时图像不显示...

HTML:

<ul>
    <li id="i1"></li>   
    <li id="i2"></li>
    <li id="i3"></li>
    <li id="i4"></li>   
    <li id="i5"></li>
    <li id="i6"></li>
    <li id="i7"></li>   
    <li id="i8"></li>
</ul>

页面加载后如何在 li.load() 上加载默认图像？

Answer 1

使用background-image而不是background，

$(this).css('background-image', 'url(assets/images/clients/logo/'+divId+'.jpg)');

要在页面加载后显示图像，请使用 $(document).ready(function(){ }) 处理程序

$(document).ready(function(){
   $('li').each(function(){
       $(this).css('background-image', 'url(assets/images/clients/logo/' + this.id + '.jpg)');
   });
});