How to change li on hover?

Question

css

Good afternoon. I would like to make a calendar where, when hovering over a date, a "circle around that date" appears. If I just make a circle on hover, it will remove the elements that are further away, since the size of the hovered element will change. How to get around this?

.calendar .number li a:hover {
  cursor: pointer;
  border-radius: 50%;
  color: #7B4EFE;
  line-height: 1;
  outline: 0;
  border: 0;
  width: 35px;
  height: 35px;
  background-color: #fff;
  text-align: center;
  transform: scale(1.2);
}

Example

Answer 1

Circle everything in advance with transparent circles, remove transparency when hovering.

Answer 2

How to bypass it?

The calendar is nothing more than a table, <li>used for lists, so in my opinion it simply does not fit the calendar.
Make up the calendar with help <table>and then manage the elements of the table to your liking. When you hover over a table element, you draw a border with a CSS3 property border-radius:50%
Something like this, but of course you may have some ideas of your own.