大佬教程收集整理的这篇文章主要介绍了jquery – 悬停多个小圆圈的更大区域，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我的问题：
现在我必须非常精确地徘徊一个点,因为它太小了.
我想知道是否有可能创建一个更大的隐形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" style="top: 400px; left: 400px;"></div> </div> </div>
.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>
尺寸可能过大,但你明白了.
以上是大佬教程为你收集整理的jquery – 悬停多个小圆圈的更大区域全部内容，希望文章能够帮你解决jquery – 悬停多个小圆圈的更大区域所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。