CSS3中的cursor屬性可以改變鼠標的形狀,我們比較常用的到就是讓鼠標變成小手,或者自己引入外部的.cur圖標文件。今天我們就說一說,cursor屬性在不引入外部.cur文件的情況下,讓其變成放大鏡,放小鏡的形狀

CSS3中的cursor屬性

国产视频appcursor 屬性規定要顯示的光標的類型(形狀)。

其值如下表

cursor 屬性

CSS3中的cursor屬性放大鏡,放小鏡圖標

以前我們如果想把光標的形狀做成放大鏡或放小鏡的效果,需要自己制作一個.cur的文件,來引入。不過CSS中的cursor屬性給我們提供了兩個分別代表放大鏡與放小鏡的值zoom-in和zoom-out,

CSS放大鏡,CSS鼠標形狀,CSS鼠標放小鏡,cursor 屬性,cursor 放大鏡

zoom-in:代表放大鏡

国产视频appzoom-out:代表放小鏡片

示例代碼:
.fada{
    cursor: -moz-zoom-in;
    cursor: -webkit-zoom-in;
    cursor: zoom-in;
    cursor: url(../images/big.cur);
}
.suoxiao{
    cursor: -moz-zoom-out;
    cursor: -webkit-zoom-out;
    cursor: zoom-out;
    cursor: url(../images/small.cur);
}

注意:zoom-in(鼠標放大鏡) 與 zoom-out(鼠標放小鏡)在IE11(包括IE11)瀏覽器下不兼容,其它瀏覽器正常。如果你的網頁想兼容所有的瀏覽器就要引入外部.cur文件了

示例代碼:

cursor:url(css/cur/big.cur),auto;
cursor:url(css/cur/small.cur),auto;