css - float Div 十字线 - 限制为 Div

Question

我正在尝试向包含 D3 Datamap 的 div 添加十字准线样式的光标效果.我已经使用 jQuery 使其正常工作，但十字准线似乎在底部和右侧重叠了它们的父 div，但在顶部和左侧没有重叠。

我创建了 this fiddle进行演示。

我已经尝试更改十字准线 div 的 position 属性，但无济于事。

在我的页面上，将 position 更改为 absolute 似乎正确地将十字准线限制在容器内，但中心点偏离了光标 (e. pageX, e.pageY).但是，我无法在 fiddle 中重新创建它，因为 fixed、static、relative、absolute 没有区别。

我找到的一个解决方案是将容器和毛发的 width 和 height 属性设置为固定值。但是，我需要容器能够响应。

Answer 1

首先，vertical和 horizontal线也与顶部和左侧的框重叠，由于 body-viewport ;)，它不可见。

其次，我做了一些调查，发现最好的解决方案是放置 crosshair-lines在 map 容器内，绝对定位到 map-container .因此我们可以更好地控制 crosshair-lines 的位置和行为。和 map-container也可以很灵活!

我添加了默认光标以便更好地测试。 — 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>