我目前有一张地图.在这张地图上我创建了几个小圆圈/圆点border-radius.徘徊一个点动画点+其他东西.
我的问题:
现在我必须非常精确地徘徊一个点,因为它太小了.
我想知道是否有可能创建一个更大的隐形hitzone悬停区域或类似的点周围,从而更容易与点交互？
这是一个例子:
$("#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" …