divをマウスに追従させても、別のdivにアタッチしたままにする[アイエフェクト]

Question

私はdivの中にあるdivをマウスの方向に動かそうとしていますが、divを残してはいけません。そうです。それは他のdivの中で立ち往生する方法はありますか？ここで

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

#eye { 
 
    position: absolute; 
 
    height: 50px; 
 
    width: 68px; 
 
    border-radius: 100px; 
 
    top: 132px; 
 
    background-color: black; 
 
} 
 
#pupil { 
 
    position: absolute; 
 
    z-index: 3; 
 
    width: 25px; 
 
    height: 25px; 
 
    border-radius: 100px; 
 
    background-color: white; 
 
} 
 
#eye2 { 
 
    position: absolute; 
 
    height: 66px; 
 
    width: 78px; 
 
    border-radius: 100px; 
 
    top: 125px; 
 
    left: 200px; 
 
    background-color: black; 
 
} 
 
#pupil2 { 
 
    position: absolute; 
 
    z-index: 3; 
 
    width: 25px; 
 
    height: 25px; 
 
    border-radius: 100px; 
 
    background-color: white; 
 
}

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

 
<div id="eye"> 
 
    <div id="pupil"></div> 
 
</div> 
 
<div id="eye2"> 
 
    <div id="pupil2"></div> 
 
</div>

fiddle aswellです！

ありがとうございました！

Answer 1

#pupilではposition: fixedを使用してください。 https://jsfiddle.net/8m74okbe/

#pupil{ 
    position:fixed; 
    z-index:3; 
    width:25px; 
    height:25px; 
    border-radius:100px; 
    background-color:green; 
} 

Answer 2

使用この：これは私はあなたが考えていると思うよりも少し複雑です

<style> 
 
    #eye { 
 
    position: absolute; 
 
    height: 50px; 
 
    width: 68px; 
 
    border-radius: 100px; 
 
    top: 132px; 
 
    background-color: black; 
 
} 
 
#pupil { 
 
    position: absolute; 
 
    z-index: 3; 
 
    width: 25px; 
 
    height: 25px; 
 
    border-radius: 100px; 
 
    background-color: white; 
 
} 
 
#eye2 { 
 
    position: absolute; 
 
    height: 66px; 
 
    width: 78px; 
 
    border-radius: 100px; 
 
    top: 125px; 
 
    left: 200px; 
 
    background-color: black; 
 
} 
 
#pupil2 { 
 
    position: absolute; 
 
    z-index: 3; 
 
    width: 25px; 
 
    height: 25px; 
 
    border-radius: 100px; 
 
    background-color: white; 
 
} 
 
    </style> 
 

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

 
<div id="eye"> 
 
    <div id="pupil"></div> 
 
</div> 
 
<div id="eye2"> 
 
    <div id="pupil2"></div> 
 
</div> 
 

 

 

 
<script> 
 
    var windowWidth = $(window).width(); 
 
     var windowHeight = $(window).height(); 
 

 
     var eyeWidth = $('#eye').width(); 
 
     var eye2Width = $('#eye2').width(); 
 

 
     var eyeHeight = $('#eye').height(); 
 
     var eye2Height = $('#eye2').height(); 
 

 
     var pupil = $('#pupil'); 
 
     var pupil2 = $('#pupil2'); 
 
     $(document).mousemove(function (e) 
 
     { 
 
      pupil.css('left', e.pageX * eyeWidth/windowWidth).css('top', e.pageY * eyeHeight/windowHeight); 
 
     }); 
 

 
     $(document).mousemove(function (e) 
 
     { 
 
      pupil2.css('left', e.pageX * eye2Width/windowWidth).css('top', e.pageY * eye2Height/windowHeight); 
 
     }); 
 
    </script>