更大的区域用于悬停多个小圆圈 [英] Bigger area for hovering multiple small circles

问题描述

我目前有一张地图。在这张地图上，我创建了几个小圆圈/点 border-radius 。悬停一个点可以使点+其他内容动画。

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.

我想知道是否可以创建一个更大的不可见的hitzone悬停区域或类似的围绕点，点？

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?

以下是示例：

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

推荐答案

您可以使用位于小圆点之上的透明伪元素创建更大的悬停区域：

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

这里是完整的代码：

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

这篇关于更大的区域用于悬停多个小圆圈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！