IE下的cursor的url不兼容

31 篇文章 0 订阅
30 篇文章 0 订阅

鼠标的光标可以显示成图片(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;   
}

这样就可以显示了。

如下图:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值