Increasing hover area of CSS circle [duplicate]

I have a page with little elements with border-radius set to 50%, so they show up as little dots:

CSS:

.star { width: 5px; height: 5px; background-color: rgb(236, 236, 236); position: absolute; border-radius: 50%; transform: scale(1); display: block; transition: 0.25s ease-in background-color, 0.25s ease-in opacity, 0.25s ease-out transform; cursor: pointer; } 

Each of these has a hover action that brings up a certain pop-up. Now however, there's an issue where hovering (at least in the browsers I've tested for) is a game of find the pixel.

Is there a "trick" to add an invisible border or so to the dots to make them more selectable without hunting for pixels?

Setting border to say 2px solid transparent just makes the circles bigger in my tests, and CSS outline does not produce a :hover state or mouseenter event.

4 Answers

Use a pseudo-element to increase the "hit area"

body { background: #000; } .star { width: 5px; height: 5px; background-color: rgb(236, 236, 236); position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: scale(1); display: block; transition: 0.25s ease-in background-color, 0.25s ease-in opacity, 0.25s ease-out transform; cursor: pointer; } .star::before { content: ''; position: absolute; border-radius: 50%; width: 500%; height: 500%; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index:-1; border:1px solid green; /* for demo purposes */ } .star:hover { background: #f00; }

<div></div>

Try this:

.star { width: 10px; height: 10px; padding:10px; background:#000; border-radius:50%; background-clip:content-box; /* <- key point*/ } .star:hover { background-color:#f00; } 

<div></div>

Increased padding will give you larger hit margins.

Your transparent border method is fine and works the best in all browsers ;) Just add:

background-clip: padding-box; 

To make sure the background does not show under the borders.

Add circle under each star and give it a black background ex;

<div> <div></div> </div> .star { top:3px; left:3px; width: 5px; height: 5px; background-color: rgb(236, 236, 236); position: absolute; border-radius: 50%; transform: scale(1); display: block; cursor: pointer;} .startWrapper{ position:absolute; background:#000; width:8px; height:8px; border-radius: 50%;}