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

Question

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

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

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

这是example：

＆＃13;

＆＃13;

$("#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");
});

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

您可以使用定位的伪元素来实现此目的。

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

＆＃13;

＆＃13;

$("#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");
  });

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

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

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

然后设置两个样式以允许您使用.dot-item作为容器来控制命中框：

.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