hover多个小圆圈的较大区域

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

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

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

这是一个例子 ：

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

Answer 1

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

 .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%; } 

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

Answer 3

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

然后设置两个样式以允许您使用.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