cursor屬性自定義鼠標樣式

本文轉載自查看原文 2017-05-17 11:08 1382 cursor/ HTML+CSS

使用了一下之后，遇到很多問題，比如圖片的格式，后綴名以及大小等問題，然后查了一下相關資料。

語法：

cursor:url(路徑),auto;

auto是需要跟的標准樣式，瀏覽器會先加載你設定好的路徑，如果沒有，則加載auto里自定義的，auto,default等都可以。

關於圖片的格式：

1，如果用圖片（gif,png）等，不能超過32*32，否則瀏覽器不認識

2，IE瀏覽器不認識gif,png等的圖片格式

3，firefox等標准瀏覽器不支持.ani格式。

4.firefox等標准瀏覽器好像也不支持動畫效果的.cur文件。

5、鼠標樣式文件一般是.cur .ani格式。IE都支持

使用jQuery也可以實現：

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <style type="text/css">
            .mouse{
                width: 200px;
                height: 200px;
                background: red;
            }
        </style>
        <script src="js/jquery-3.1.0.min.js" type="text/javascript" charset="utf-8"></script>
    </head>

    <body>
        <div class="mouse">你好，我是使用自定義樣式鼠標實現的效果</div>
        <script type="text/javascript">
            $(document).ready(function() {
                $('.mouse').hover(
                    function() {
                        $(this).css({
                            cursor: "url(1.ani),auto"
                        })
                    },
                    function() {
                        $(this).css({
                            cursor: "url(),auto"
                        })
                    })
            })
        </script>
    </body>

</html>

注意，需要一個1.ani的圖片文件，直接png圖片，后綴名改一下就行！

原文：http://www.cnblogs.com/hsprout/p/6209911.html#3670213

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 cursor url 自定義鼠標樣式屬性title樣式自定義自定義title屬性樣式 Android：系統自定義鼠標樣式切換 C# Winform 自定義光標 Cursor Typora 樣式自定義 TreeView樣式自定義自定義ToggleButton的樣式 CSS自定義樣式 echart自定義樣式