浮動小数点十字線 - 桁区切り

Question

D3 Datamapを含むdivに十字型のカーソルエフェクトを追加しようとしています。私はそれをjQueryを使って動作させましたが、十字線は下と右で親divを重ねるように見えますが、上と左は重ならないようです。

デモのためにthis fiddleを作成しました。

十字線のdivのpositionプロパティを無駄に変更しようとしました。

positionをabsoluteに変更すると、十字線をコンテナに正しく閉じ込めるように見えますが、中心点はカーソル（e.pageX, e.pageY）からオフセットされています。しかし、fixed, static, relative, absoluteは違いがないので、私はフィドルでこれを再現することはできません。

私が見つけた1つの解決策は、容器とヘアのwidthとheightのプロパティを固定値に設定することでした。しかし、私は応答するためには、容器が必要です。

Answer 1

最初に、verticalとhorizontalの行も上部と左のボックスと重なっていますが、body-viewportのために表示されませんでした。

第2に、私はいくつかの調査を行い、map-containerに絶対配置されたマップコンテナ内にcrosshair-linesを配置することが最善の解決策であることを発見しました。したがって、私たちはcrosshair-linesとmap-containerの位置と動作をよりよく制御できます。

私はより良いテストのために、デフォルトのカーソルを追加しました。位置 `へrelative`、ヘアクラス：： - - https://jsfiddle.net/9r4rtcz9/6/私は位置`へのデータマップコンテナに変更する場合

//Map Hover Crosshairs 
 
$(function() { 
 
    var cH = $('#crosshair-h'), 
 
    cV = $('#crosshair-v'); 
 
    $('.map_wrapper').on('mouseover', function() { 
 
    cH.css('visibility', 'visible'); 
 
    cV.css('visibility', 'visible'); 
 

 
    $('.map_wrapper').bind('mousemove', function(e) { 
 
     cH.css('top', e.pageY); 
 
     cV.css('left', e.pageX); 
 
    }); 
 
    }); 
 

 
    $('.map_wrapper').on('mouseout', function() { 
 
    cH.css('visibility', 'hidden'); 
 
    cV.css('visibility', 'hidden'); 
 
    $('.map_wrapper').unbind("mousemove"); 
 
    }); 
 
});

.map_wrapper { 
 
    position: relative; 
 
    height: 100px; 
 
    width: 300px; 
 
    border: 1px solid black; 
 
    overflow: hidden; 
 
    cursor: default; 
 
} 
 

 
.hair { 
 
    float: left; 
 
    position: absolute; 
 
    background-color: rgba(100, 100, 100, 0.5); 
 
    z-index: 10; 
 
    pointer-events: none; 
 
} 
 

 
#crosshair-h { 
 
    width: 100%; 
 
    height: 2px; 
 
    margin-top: -8px; 
 
    visibility: visible; 
 
} 
 

 
#crosshair-v { 
 
    height: 100%; 
 
    width: 2px; 
 
    margin-left: -8px; 
 
    visibility: visible; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="map_wrapper"> 
 
    <div class="hair" id="crosshair-h"></div> 
 
    <div class="hair" id="crosshair-v"></div> 
 
</div> 
 

 
<p class="datamaps">D3 Data Maps Here</p>