HTML form selectメニューの中の文字列にカーソルが当たった際のイメージ表示方法

Question

HTML form selectボックスにおいて

selectメニューの中の文字列にカーソルが当たった際に、
イメージを表示させる方法はありますでしょうか？
ーーーーー
犬
猫
ウサギ
ーーーーー
とあった場合、犬にカーソルを合わせると犬の画像が表示されるという様なことです。
猫・ウサギもそれぞれ同様です。

どのようにすべきでしょうか？
宜しくお願いします！！

Answer 1

こんな感じです

$(function(){
  $('select[name=animal]').on('change',function(){
    var imglist={"犬":"dog.jpg","猫":"cat.jpg","ウサギ":"rabbit.jpg"};
    $('#viewarea img').remove();
    if(typeof imglist[$(this).val()]!=="undefined"){
      $('#viewarea').append($('<img>').attr('src',imglist[$(this).val()]));
    }
  }).trigger('change');
});

<select name="animal">
<option value="犬">犬</option>
<option value="猫">猫</option>
<option value="ウサギ">ウサギ</option>
<option value="不明">不明</option>
</select>
<div id="viewarea"></div>

Comments

[vibrato]

yambejp様　回答ありがとうございます！
試してみましたところ
「選択(クリック)をすると」画像が表示されました。
↑この知識自体も無かったのでとても勉強になったのですが、

「カーソルが当たった際に(クリックせずとも)」画像が表示される
↑が希望の動作でした。
せっかく教えていただいたのに失礼とは思いますが、上記の希望が叶う方法があれば教えていただきたいです。

是非とも宜しくお願い致します。

[yambejp]

調べた範囲ではカーソルが当たったときには
イベントが発生していないようなので
命題の実現は難しいと思います

[vibrato]

返信ありがとうございます。

>命題の実現は難しいと思います
そうなんですね；

希望の動きは出来ないと解りましたが、とても勉強になりました！
ありがとうございました！！