IE下的cursor的url不兼容

布满荆棘的人生 2022-08-08 03:27 165阅读 0赞

鼠标的光标可以显示成图片（ico格式或者cur等），光标在线制作网址为：[http://app.baidu.com/widget?appid=134026][http_app.baidu.com_widget_appid_134026]。

html：

</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][http_y2.ifengimg.com_a_2012_22_3cbe4913aa86225.cur_auto];     
\}

这样就可以显示了。

如下图：

![20150430180536027][]

[http_app.baidu.com_widget_appid_134026]: http://app.baidu.com/widget?appid=134026
[http_y2.ifengimg.com_a_2012_22_3cbe4913aa86225.cur_auto]: http://y2.ifengimg.com/a/2012_22/3cbe4913aa86225.cur'%20rel=
[20150430180536027]: /images/20220805/6927e7fd9b6d4b62b75ae0a4a8be54ab.png