css - Hovering outside div's radius -

I have a problem with boundary state with the hover state. Hover state should be only when the cursor is at the top of the circle. It is not when it is in the corner of the div

Example:

It seems impossible to do this, so a useful solution is welcome.

Whatever you mentioned,

only when the hover state It should happen when the cursor is at the top of the circle. So it's not when it's in the corner of the device.

here.

HTML:

  & lt; Div class = 'test' & gt; & Lt; / Div & gt; & Lt; Div class = "center" & gt; & Lt; / Div & gt;   
  CSS:   
  .test {height: 100px; Width: 100px; Background color: red; Border-radius: 100px; Webkit-boundary-radius: 100px; -image-radius: 100px; Status: Completed; } .test: hover {background-color: blue; }. Center {height: 90px; Width: Multiplied 90px; Background color: red; Border-radius: 100px; Webkit-boundary-radius: 100px; -image-radius: 100px; Status: Completed; Z-index: 99; Top: 5px; Left: 5px; }   
 I hope you want this only. Hope it helps.