悬停多个小圆圈的更大区域

Question

我目前有一张地图。在这张地图上，我用border-radius 创建了几个小圆圈/点。悬停一个点会为点 + 其他内容设置动画。

我的问题：
现在我必须非常精确地悬停一个点，因为它太小了。

我想知道是否有可能在圆点周围创建一个更大的不可见命中区域悬停区域或类似区域，从而更容易与圆点交互？

这是example：

$("#map-container").find(".dot-item")
	.mouseenter(function() {
		console.log("over");
  
      $(this).css("width","10");
      $(this).css("height","10");
	})
	.mouseleave(function() {
		console.log("out");
  
      $(this).css("width","5");
      $(this).css("height","5");
	}).on("click", function(e) {
		console.log("click");
});

#wrapper {
	position: relative;
	width: 500px;
	height: 500px;
  background-color: gray;
}

.dot-item {
  position: absolute;
  border-radius: 50%;
  width: 5px;
  height: 5px;
  background-color: red;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
  <div id="map-container">
    <div class="dot-item" style="top: 100px; left: 100px;"></div>
    <div class="dot-item" style="top: 200px; left: 200px;"></div>
    <div class="dot-item" style="top: 210px; left: 210px;"></div>
    <div class="dot-item" style="top: 400px; left: 400px;"></div>
  </div>
</div>

Answer 1

您可以创建一个更大的悬停区域，并在点上方放置一个透明的伪元素：

.dot-item:before{
  content:'';
  position:absolute;
  top:-300%; left:-300%;
  width:700%; height:700%;
  border-radius:50%;
}

这是完整的代码：

$("#map-container").find(".dot-item")
  .mouseenter(function() {
    console.log("over");

    $(this).css("width", "10");
    $(this).css("height", "10");
  })
  .mouseleave(function() {
    console.log("out");

    $(this).css("width", "5");
    $(this).css("height", "5");
  }).on("click", function(e) {
    console.log("click");
  });

#wrapper {
  position: relative;
  width: 500px;
  height: 500px;
  background-color: gray;
}
.dot-item {
  position: absolute;
  border-radius: 50%;
  width: 5px;
  height: 5px;
  background-color: red;
  cursor: pointer;
}
.dot-item:before {
  content: '';
  position: absolute;
  top: -300%;
  left: -300%;
  width: 700%;
  height: 700%;
  border-radius: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
  <div id="map-container">
    <div class="dot-item" style="top: 100px; left: 100px;"></div>
    <div class="dot-item" style="top: 200px; left: 200px;"></div>
    <div class="dot-item" style="top: 210px; left: 210px;"></div>
    <div class="dot-item" style="top: 400px; left: 400px;"></div>
  </div>
</div>

尺寸可能过大，但你明白了。

Answer 2

您可以使用定位的伪元素来实现这一点。

我添加了一个用于视觉澄清的边框，但这当然不会出现在最终产品中。

$("#map-container").find(".dot-item")
  .mouseenter(function() {
    console.log("over");

    $(this).css("width", "10");
    $(this).css("height", "10");
  })
  .mouseleave(function() {
    console.log("out");

    $(this).css("width", "5");
    $(this).css("height", "5");
  }).on("click", function(e) {
    console.log("click");
  });

#wrapper {
  position: relative;
  width: 500px;
  height: 500px;
  background-color: gray;
}
.dot-item {
  position: absolute;
  border-radius: 50%;
  width: 5px;
  height: 5px;
  background-color: red;
  cursor: pointer;
  z-index: 2;
}
.dot-item:after {
  content: "";
  width: 500%;
  height: 500%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  position: absolute;
  z-index: -1;
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div id="map-container">
    <div class="dot-item" style="top: 100px; left: 100px;"></div>
    <div class="dot-item" style="top: 200px; left: 200px;"></div>
    <div class="dot-item" style="top: 210px; left: 210px;"></div>
    <div class="dot-item" style="top: 400px; left: 400px;"></div>
  </div>
</div>

Answer 3

通过在 CSS 中处理悬停状态，您可以向 .dot-item 添加单个元素，如下所示：

<div class="dot-item" style="top: 100px; left: 100px;"><span></span></div>

然后设置这两者的样式，让你可以用.dot-item作为容器来控制hit box：

.dot-item {
  position: absolute;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  cursor: pointer;
}
.dot-item > span{
  display: block;
  border-radius: 50%;
  width: 5px;
  height: 5px;
  margin: 10px;
  background-color: red;
}
.dot-item:hover > span{
  width: 10px;
  height: 10px;
  margin: 7px;
}

在此处查看实际操作：http://codepen.io/anon/pen/azdaep