ホバーでカーソルとして画像を設定する

私の個人的なポートフォリオのために使用するインスピレーションとアイデアを探している間、私は遭遇しましたEtienne Pharabot's portfolio . 私は彼の導入、特にEmojisがテキスト上でマウスカーソルをホバーしたときにどのように表示されるかを愛しました.私はこれをとても愛し、私は盗むことを決めたuse this concept in my personal portfolio . 私の実装は、エティエンヌのようにクールではないかもしれないが、それはかなり近い:D
これで完全なコードを見つけることができますJSFiddle . 以下、コードワークの仕方を説明します.
まず、HTMLを持っています.

  <div class="intro">
    <h2> <span class="hello"> Hello! </span> Nice to meet you!</h2>
    <h2>My name is <span class="my-name"> JOHN </span>.</h2>
    <h2>I am a <span class=dev> developer
          </span> living <span class="country"> CANADA </span>.
    </h2>
  </div>

私は、テキストの各々の震えている部分を同封しましたspan タグとそれらを与えられたクラス名.ホバーに表示するイメージを設定するとき、後でこれらのクラス名を使用します.
我々のCSSコードに.若干の基本的なスタイルを含めましょう

.intro {
  padding: 10px;
  width:70%;;
  margin-left:10%;
  padding-top:40px;
    position:relative;
  padding-bottom: 50px;
}

.intro h2 {
  margin:0;
  color: #333;
  text-transform:uppercase;
  font-size: 10vw;

}

.intro h2 span {
  text-shadow: 1px 1px 1px rgba(0,255,0,1);
}

上記のスタイリングは本当にこの機能に影響しません.それは、この例をより視覚的に魅力的にするだけです.私は、テキストを与えましたspan タグ緑のテキストの影-私の方法は、彼らが異なっていることを示すと、彼らはそれにホバーするようにユーザーの関心を呼び出すために.
最後にcursor プロパティは、適切な画像リンクの値を与えることによって、すべてのテキストのイメージにカーソルを設定することができます.

.hello:hover {
 cursor:url(http://www.picgifs.com/smileys/smileys-and-emoticons/money/smileys-money-671353.gif), auto;
}

.my-name:hover {
 cursor:url(http://www.picgifs.com/smileys/smileys-and-emoticons/money/smileys-money-671353.gif), auto;
}

.country:hover {
 cursor:url(http://www.picgifs.com/smileys/smileys-and-emoticons/money/smileys-money-671353.gif), auto;
}

.dev:hover {
 cursor:url(http://www.picgifs.com/smileys/smileys-and-emoticons/money/smileys-money-671353.gif), auto;
}

付録でauto にcursor 値は、画像がロードできない場合は、カーソルがデフォルト状態に戻ることを確認します.今、あなたは上のホバーspan テキストは、カーソルが画像に変更されます.任意の画像を使用して自由にしたい.イメージの大きさも問題だと思います.イメージが大きすぎるならば、それはロードされません.私は160 x 160のイメージで作業を得ることができなかった.しかし、私が60 x 60にイメージサイズを減らしたとき、それは動きました--テキストの上でとき、カーソルはイメージに変わります.
これを試してみるとどうなったらいいか教えてください