cursor属性自定义鼠标样式

使用了一下之后，遇到很多问题，比如图片的格式，后缀名以及大小等问题，然后查了一下相关资料。

语法：

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

posted @ 2017-05-17 11:08  晴晴加油  阅读(3275)  评论(0)  编辑  收藏  举报