Presently, I have a map that features several small circles/dots created using the border-radius property. When hovering over a dot, it triggers an animation along with other effects.
MY CONCERN:
At the moment, I need to be incredibly accurate when trying to hover over a dot because of its small size.
I am curious if there is a way to create a larger invisible area for hover detection around the dot, making it easier to interact with?
You can view an example here:
$("#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>