css鼠标悬停样式_利用Css3样式属性Cursor来更换自定义个性化鼠标指针(光标
原文轉載自「劉悅的技術博客」 ( 利用Css3樣式屬性Cursor來更換自定義個性化鼠標指針(光標) )
現而今，我們縱向的回顧整個大前端的歷史，不難發現，人們對前端的審美要求越來越高，越來越嚴苛，與此同時，人們對追求美的體驗是也極致的，從理性到感性，從平面到幾何，從現實到虛擬，所以從某種角度來說，作為前端工程師，他們所追求的東西往往和人類軟件核心理念南轅北轍，因為人類的終極追求是個性，絕不是共性，換句話說，大家都一樣就不好玩兒了。
那么作為web前端，追求個性的手段手段之一就是鼠標指針的更換，早在css2時代，Cursor屬性就可以對象鼠標指針光標進行控制，可以根據自身需要選擇設置鼠標指針樣式，代碼如下：
<head><title>cursor屬性</title> </head> <body><p>請把鼠標移動到單詞上，可以看到鼠標指針發生變化：</p><span style="cursor:auto">Auto......</span><br /><span style="cursor:crosshair">Crosshair......</span><br /><span style="cursor:default">Default......</span><br /><span style="cursor:pointer">Pointer......</span><br /><span style="cursor:move">Move......</span><br /><span style="cursor:e-resize">e-resize......</span><br /><span style="cursor:ne-resize">ne-resize......</span><br /><span style="cursor:nw-resize">nw-resize......</span><br /><span style="cursor:n-resize">n-resize......</span><br /><span style="cursor:se-resize">se-resize......</span><br /><span style="cursor:sw-resize">sw-resize......</span><br /><span style="cursor:s-resize">s-resize......</span><br /><span style="cursor:w-resize">w-resize......</span><br /><span style="cursor:text">text......</span><br /><span style="cursor:wait">wait......</span><br /><span style="cursor:help">help......</span> </body> </html>不過這些屬性僅僅是更換系統自定義的一些默認樣式，毫無新意，當然也不能滿足所有用戶的需求，特別對于一些追求時尚和個性化的Web應用。因此，CSS允許用戶創建自己的鼠標光標圖片，并保存為 .cur 的光標文件，然后通過 cursor屬性來使用它們。如：
cursor: url(cursors/cursor.cur) ;上述規則表示，要求瀏覽器加載名稱為 cursor.cur 光標文件，并將它用作鼠標光標。當然，瀏覽器也有可能不支持 .cur 格式的光標文件，或光標文件無法正常加載。因此，大多數瀏覽器要求必須指定一個備用的光標，否則，cursor屬性無效。如：
cursor: url(cursors/cursor.cur), pointer;除了更換鼠標指針，我們也可以稍加一些變化，比如鼠標懸停在超鏈接的時候，語義化操作往往需要給用戶一點提示：
a:hover, a:focus, a:active, a.active {color: #fec503;cursor:url(././mouse/breeze/Hand.cur), pointer; }效果是下面這樣:
這里我使用的鼠標風格是在業界鼎鼎有名的 Breeze
當然了由于不同瀏覽器所支持的光標文件格式不盡相同，Opera和IE僅支持 .cur 格式，Firefox、Chrome和Safari既支持 .cur 格式，也支持常見的 .jpg、.gif、.jpg 等格式。
所以從通用性的角度來看，.cur格式是最保險的，不過也不用擔心，如果出現不兼容的情況，系統會選擇默認的樣式。
值得一提的是，對于.cur文件來說，尺寸最好選擇不大于于32*32像素的，因為通過樣式進行樣式的加載會損耗一些網頁性能，同時過大的光標也會影響用戶的點選。
最后，如果手里有.cur的鼠標光標圖片樣式，這些圖片不僅僅可以應用在web網站上，像電腦系統也可以使用比如win10,ubuntu或者mac,這里推薦一個鼠標指針風格網站的下載地址：鼠標指針 這上面的鼠標指針風格不能說清新脫俗吧，但是也比那些爛大街的殺馬特造型要好看多了。
原文轉載自「劉悅的技術博客」 ( 利用Css3樣式屬性Cursor來更換自定義個性化鼠標指針(光標) )
總結
以上是生活随笔為你收集整理的css鼠标悬停样式_利用Css3样式属性Cursor来更换自定义个性化鼠标指针(光标的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： css修改select选择框option
- 下一篇： 硬盘突然提示没有初始化_测试流程_507