マウスカーソルを画像にしたい

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="gb_base.css" rel="stylesheet" type="text/css">
</head>
<style>
    body {
            background-size: cover;
            background: url(アリエル背景.jpg) center center / cover no-repeat fixed;
        cursor: url(arieru.cur), url(arieru.jpg), auto;
        }


    
    </style>
<body>
<script src="bubbleparticle.2.js"></script>

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
<script type="text/javascript" src="saisyuu.js"></script>
<script type="text/javascript">
    
function gotoPage(page) {
//     document.location.href ="gb01.html";
    alert("ページ遷移しまOK?");
      document.location.href =page;
//    document.location.href =gb02;
}

$("#A").on("click",function(){//Aへ進む
    gotoPage("type4.html");
//     document.location.href ="gb01.html";
});
    
//    $("#B").on("click",function(){//Aへ進む
//    gotoPage("type4.html");
////     document.location.href ="gb01.html";
//});

</script>
</body>
</html>

マウスカーソルを画像にして表示したいと考えているのですがうまく動きません。
cursor: url(arieru.cur), url(arieru.jpg), auto;
をｃｓｓで付け加えてみました表示したい画像はarieruになります。
どなたかわかる方、教えていただけないでしょうか。

sousuke

2018/01/04 12:54

「ｃｓｓで付け加えてみました表示したい画像はarieruになります。」とありますがこれはurl(arieru.cur)にならずにurl(arieru.jpg)になるという意味ですか？

ssssss

2018/01/04 13:07

cssでcursor: url(arieru.cur), url(arieru.jpg), auto;を付け加えました。表示したい画像の名前がarieruです。と質問する予定でした。すみません打ち間違いました。

行動規範の内容に同意します

回答2件

ベストアンサー

32x32で画像を作ってみては？あとブラウザはなんですか？

投稿2018/01/04 13:55

sousuke

総合スコア3828

ssssss

2018/01/04 14:04

ブラウザはグーグルクロムです。画像を多きいまま表示したいのですが、小さくしない限り表示できないのでしょうか。

sousuke

2018/01/04 14:11

適当なpngやってみた感じでは170x170は表示されず、32x32だと表示されます。

行動規範の内容に同意します

ソースでは中身がないのでbodyの幅や高さがありません。
あくまでbody内でのカーソルのアイコンを指定しているから適用されないのでは？

css
1body {
2            background-size: cover;
3            background: url(アリエル背景.jpg) center center / cover no-repeat fixed;
4        cursor: url(arieru.cur), url(arieru.jpg), auto;
5        /*幅と高さ確保*/
6        width:1000px;height:1000px;
7        }
8
9