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

我目前有一张地图.在这张地图上,我用border-radius创建了几个小圆圈/圆点.徘徊一个点动画点其他东西.

我的问题：
现在我必须非常精确地徘徊一个点,因为它太小了.

我想知道是否有可能创建一个更大的隐形hitzone悬停区域或类似的点周围,从而更容易与点交互？

这是一个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>

您可以使用位于点上方的透明伪元素创建更大的悬停区域：

.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>

尺寸可能过大,但你明白了.