Large hovering area for several small circles
I currently have a map. This map has several small circles / dots created with border-radius
. Point hover animates point + other material.
MY RELEASE:
Right now, I have to be VERY precise to get the point, because it is so small.
I am wondering if it could create a large invisible temporal zone hover or similar surrounding point, making it easier to interact with the point?
Here's 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>
source to share
You can create a large hover area with a transparent pseudo element positioned over the points with:
.dot-item:before{
content:'';
position:absolute;
top:-300%; left:-300%;
width:700%; height:700%;
border-radius:50%;
}
And here's the complete 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>
The dimensions are probably overkill, but you get the idea.
source to share
A positional pseudo-element can be used to achieve this.
I added a border for visual clarification, but that certainly wouldn't be in the final product.
$("#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;
z-index: 2;
}
.dot-item:after {
content: "";
width: 500%;
height: 500%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
position: absolute;
z-index: -1;
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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>
source to share
When handling hover states in CSS, you can add one element .dot-item
like so:
<div class="dot-item" style="top: 100px; left: 100px;"><span></span></div>
Then create two so you can manipulate the text .dot-item
box as a container:
.dot-item {
position: absolute;
border-radius: 50%;
width: 25px;
height: 25px;
cursor: pointer;
}
.dot-item > span{
display: block;
border-radius: 50%;
width: 5px;
height: 5px;
margin: 10px;
background-color: red;
}
.dot-item:hover > span{
width: 10px;
height: 10px;
margin: 7px;
}
See it here: http://codepen.io/anon/pen/azdaep
source to share