Bigger area for hovering multiple small circles

Question

I currently have a map. On this map I several small circles/dots created with border-radius. Hovering a dot animates the dot + other stuff.

MY ISSUE:
Right now I have to be VERY precise to hover a dot because it's so small.

Im wondering if its possible to create a bigger invisible hitzone hover area or similar surrounding the dot, thus making it easier to interact with the dot?

Here is an 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>

Answer 1

You can create a bigger hover area with a transparent pseudo element positioned over the dots with :

.dot-item:before{
  content:'';
  position:absolute;
  top:-300%; left:-300%;
  width:700%; height:700%;
  border-radius:50%;
}

And here is the full code :

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

Sizes are probably excessive but you get the idea.