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

[![Said dots look like this](https://i.stack.imgur.com/kAUy2.png)](https://i.stack.imgur.com/kAUy2.png)

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.