属性データマウスオーバーは何ですか？ウェブページ上

Question

は、私は次のような構造で複数の画像を見つけました：

<img src="/image.png" 
    class="images" 
    data-mouseover="/mouse_over_image.png"> 

それらの上にマウスを置くとき、私は画像SRCそのデータ-マウスオーバー値に変化することを見出し、彼らマウスがもう終わっていないときに戻る。

ここでもGoogleでも「データマウスオーバー」を検索しても何も見つかりませんでした。この属性はどこに属していますか？ （何らかのフレームワーク、おそらく？）、そしてこの効果を達成するためにどのように使用されていますか？

Answer 1

MDNで検索しましたdata-* global attributesに関する情報が見つかりました。

ここで、data- *というhtml要素の属性は、「カスタム属性」と呼ばれるグローバル属性のクラスです。これらはHTMLとDOM表現の間で情報を交換することを可能にします。これはスクリプトで使用することも、使用することもできます。

マウスオーバーの作業でイメージを変更する効果は、実際には非常に簡単で、 'mouseover' 'mouseout'イベントリスナーを追加することで実装できます。ここでは、jQueryを使用してこの効果を達成するためにdata- *属性を編集する簡単なスクリプトを示します。

$(".img_change").mouseover(function() { 
 
    $(this).data("mouseout", this.src); 
 
    this.src = $(this).data("mouseover"); 
 

 
}); 
 
$(".img_change").mouseout(function() { 
 
    this.src = $(this).data("mouseout"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<img src="http://i65.tinypic.com/e7dnas.png" class="img_change" data-mouseover="http://i66.tinypic.com/2j5x6l1.png">