Question

将鼠标悬停在具有边框半径的图像上时，即使光标位于裁剪图像的外部（包含图像的正方形内部），也会设置样式。

这发生在Safari中；它可以在Firefox和Chrome中正常运行。有什么方法可以使用CSS修复它？

.imagen {
  border-radius: 50%;
}

.imagen:hover {
  opacity: .5;
}

<img src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Vado_l_ammazzo_e_torno-George_Hilton.jpg" class="imagen" />

Answer 1

最好的跨平台解决方案可能是将CSS url()函数与background属性一起使用：

#image {
  border-radius: 50%;
  height: 250px;
  width: 250px;
  background: url('https://upload.wikimedia.org/wikipedia/commons/a/a0/Vado_l_ammazzo_e_torno-George_Hilton.jpg') 0px 0px/contain;
}

#image:hover {
  opacity: .5;
}

<div id='image'></div>

Safari中带有边框半径和：hover错误的图像

1 个答案: