Divは特定の親の中でのみカーソルをたどります

Question

div .drag-indicatorにカーソルを追従させたいと思います。クリックすると消えます。以下のコードはこれを実現していますが、特定のdivにホバーするときにのみこの動作が発生するようにしてください。.carousel現在のコードでは、画面上の位置に関係なく、またそのdiv内だけでなくクリックが行われたときにも、.drag-indicatorがマウスに追従します。

私のコードはやや簡素化できると確信していますので、ここでのアドバイスはすばらしいでしょう。私はそれをただ一つの機能にしたいと思っています。

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

/* Follow cursor */ 
 
$(document).on('mousemove', function(e) { 
 
    $('.drag-indicator').css({ 
 
    left: e.pageX, 
 
    top: e.pageY 
 
    }); 
 
}); 
 

 
/* Hide when clicked */ 
 
$(document).on('mousedown', function(e) { 
 
    $('.drag-indicator').fadeOut(300) 
 
});

.drag-indicator { 
 
    position: absolute; 
 
    width: 50px; 
 
    height: 50px; 
 
    border-radius: 100%; 
 
    background-color: red; 
 
    z-index: 9999; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="carousel"> 
 
    <div class="carousel-cell">CELL CONTENT</div> 
 
    <div class="carousel-cell">CELL CONTENT</div> 
 
    <div class="carousel-cell">CELL CONTENT</div> 
 
    <div class="drag-indicator">DRAG INDICATOR</div> 
 
</div>

Answer 1

あなたが必要として、この作品を作る代わりにdocumentの.carouselに直接イベントハンドラをアタッチするには、次の

$('.carousel').on({ 
 
    mousemove: function(e) { 
 
    $('.drag-indicator').css({ 
 
     left: e.pageX, 
 
     top: e.pageY 
 
    }) 
 
    }, 
 
    mousedown: function(e) { 
 
    $('.drag-indicator').fadeOut(300) 
 
    } 
 
});

.drag-indicator { 
 
    position: absolute; 
 
    width: 50px; 
 
    height: 50px; 
 
    border-radius: 100%; 
 
    background-color: red; 
 
    z-index: 9999; 
 
} 
 

 
.carousel { 
 
    border: 1px solid #C00; 
 
} 
 

 
.carousel .drag-indicator { 
 
    display: none; 
 
} 
 
.carousel:hover .drag-indicator { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="carousel"> 
 
    <div class="carousel-cell">CELL CONTENT</div> 
 
    <div class="carousel-cell">CELL CONTENT</div> 
 
    <div class="carousel-cell">CELL CONTENT</div> 
 
    <div class="drag-indicator">DRAG INDICATOR</div> 
 
</div>