マウスのホバーイメージのたびに5-6ドット（div）になるhtmlコードが必要

Question

私は以下のコードを使用していますが動作しません。 JavaScriptの

$(document).on('mousemove', function(e){ 
    $('#dot').css({ 
     left: e.pageX, 
     top: e.pageY 
    }); 
}); 

は誰でも画像を含むHTMLをコーディングすると、その画像にカーソルのホバー上のドットに従わなければなりません私を助けることができる

HTML

<div class="dot"></div> 

CSS

div.dot{ 
    height: 10px; 
    width: 10px; 
    background-color: red; 
    position: absolute; 
} 

それが画像を残すときにはドットが除去される。

Answer 1

単にonmouseoutとonmouseoverイベントを検出し、それに応じてドット要素を非表示にします。

• onmouseoutマウスが要素（MDN）から離されたときに起動します。
• onmouseoverマウスが要素（MDN）に移動したとき。それはblockに設定されている場合、要素が表示されていないnoneに設定されている場合
• CSSの要素がどのように表示されるかdisplayスタイルの変更（MDN）は、要素は、表示されます。

var dots = $('.dot'); 
 
var pos = [] 
 
var delay = 0; 
 

 
for (let n = 0; n < 5; n++) { 
 
    pos.push({x: 0, y: 0}); 
 
} 
 

 
$('#img').on('mousemove', function (e) { 
 
    if (++delay < 1) { 
 
     return; 
 
    } 
 
    else { 
 
     delay = 0; 
 
    } 
 
    pos[1].x = e.pageX; 
 
    pos[1].y = e.pageY; 
 
    pos.push(pos.shift()); 
 
    dots.each(function (idx, el) { 
 
     el.style.left = pos[idx].x + 'px'; 
 
     el.style.top = pos[idx].y + 'px'; 
 
    }); 
 
}); 
 

 
$('#img').on('mouseout', function (e) { 
 
    dots.each(function(idx, el) { 
 
     el.style.display = "none"; 
 
    }); 
 
}); 
 

 
$('#img').on('mouseover', function (e) { 
 
    dots.each(function(idx, el) { 
 
     el.style.display = "block"; 
 
    }); 
 
});

div.dot{ 
 
    height: 5px; 
 
    width: 5px; 
 
    background-color: red; 
 
    position: absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="dot"></div> 
 
<div class="dot"></div> 
 
<div class="dot"></div> 
 
<div class="dot"></div> 
 
<div class="dot"></div> 
 
<img id="img" src="https://www.gravatar.com/avatar/0afe5fc8825e9d31844fd90101e56e06?s=328&d=identicon&r=PG&f=1">