Ich habe ein Problem mit dem Schweben und einem Div mit einem Rahmenradius.

Wenn ein Div Bilder und einen Randradius enthält, ist die "Hitbox" dafür falsch. Wenn Sie den Mauszeiger über eine der Ecken des Div bewegen (wo sich die Ecken befänden, wenn sie keinen Rahmenradius hätten), wird der Schwebestil angezeigt. Ich würde erwarten, dass der Stil nur dann angezeigt wird, wenn sich die Maus tatsächlich innerhalb des Kreises befindet.

Wenn sich nichts im div befindet, ist die "hitbox" des div korrekt, überschreitet jedoch den Rand, wenn sich darin Elemente befinden.

Ich könnte ein Hintergrundbild in der div, aber ich würde es aus Gründen der Barrierefreiheit nicht vorziehen.

#test-wrapper {
  background-color: #EEE;
  border: 4px dashed #999;
  display: inline-block;
}

#switcher {
  border-radius: 50%;
  overflow: hidden;
  position: relative;
}

#switcher,
#switcher .first,
#switcher .second {
  width: 100px;
  height: 100px;
}

#switcher .first,
#switcher .second {
  position: absolute;
  top: 0;
  left: 0;
}

#switcher:hover .first {
  display: none;
}

  <!-- This is used to show the "hitbox" for the switcher and has no effect on the switcher itself -->
<div id="test-wrapper">
  <div id="switcher">
    <!-- Shown on hover -->
    <img src="https://placeholdit.imgix.net/~text?txtsize=30&txt=Second&w=100&h=100&txttrack=0" class="second">
    
    <!-- Always shown -->
    <img src="https://placeholdit.imgix.net/~text?txtsize=30&txt=First&w=100&h=100&txttrack=0" class="first">
  </div>
</div>