天天看點

IE下的cursor的url不相容

滑鼠的光标可以顯示成圖檔(ico格式或者cur等),光标線上制作網址為:http://app.baidu.com/widget?appid=134026。

html:

<div class="flowerbed">

            <div id="bottle" class="cursor" title="點選開始灑水"></div>            

</div>  

css:

#bottle{

    background:url("../images/flower.jpg");

    height:330px;

    width:750px;

    border:1px solid #ccc;

    margin:0 auto;   

}

.bottle_bg_change{

    background:url("../images/flower_change.jpg");

}

.cursor{

     cursor:url("../images/bottle.cur"),auto;

}

.cursor_change{

    cursor:url("../images/bottle_change.cur"),auto;

}

js:

$(document).ready(function(){

    $("#bottle").click(function(){         

        $(this).removeClass("cursor").addClass("cursor_change");       

        function showtime(){

            $("#bottle").css('background','url(./images/flower_change.jpg)');

        }

        var test = setTimeout(function(){

            showtime();

        },4000);       

    });

});

在IE下光标不會呈現成圖檔的效果,這時候需要使用伺服器上光标圖檔的絕對路徑。比如:

.cursor{

     cursor:url("http://y2.ifengimg.com/a/2012_22/3cbe4913aa86225.cur"),auto;   

}

這樣就可以顯示了。

如下圖:

IE下的cursor的url不相容

繼續閱讀