Why is the cursor shaking?

Issue

My marker has a problem that when I do mouse:hover the cursor is shaking.

I put my component into codesandbox with the same code I'm using on my application.

You may notice when you bring the mouse closer to the edge of the marker, the cursor starts to shaking.

.marker {
  transition: all 0.5s ease;
  border: 2px solid #fff;
  background-color: #61ba9e;
  border-radius: 100%;
  width: 20px;
  height: 20px;
}

.marker:hover {
  height: 12.5px;
  width: 12.5px;
  box-shadow: 0 0 0 4px rgb(97 186 158 / 60%);
  cursor: pointer;
}

<div class="marker"></div>

I don't know why this is happening, can you help me?

Thanks in advance.

Solution

The shaking is caused by your element shrinking and therefore your cursor not hovering anymore (and then re-growing as you aren't hovering, causing your cursor to change again)

Instead of changing the size of your marker, why not use a pseudo element, then your hand won't "shake" as it will always hover the marker (but the pseudo element will change size instead).

.marker {
  width: 20px;
  height: 20px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.marker:hover {
  cursor: pointer;
}

.marker:after {
  content: '';
  display: block;
  transition: all 0.5s ease;
  border: 2px solid #fff;
  background-color: #61ba9e;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  box-sizing:border-box;
}

.marker:hover:after {
  height: 12.5px;
  width: 12.5px;
  box-shadow: 0 0 0 4px rgb(97 186 158 / 60%);
}

<div class="marker"></div>

Answered By - Pete