html - :hover won't trigger because bounding box is in the way

Question

编辑: 这似乎只是 Safari 上的问题

编辑 2: 最新的 Safari 测试版修复了这个问题

这是我的问题:

我正在尝试在圆形图像后面创建一个圆形选项卡，并在您将鼠标悬停在该选项卡上时更改不透明度。

问题是，因为圆形图像上的边界框是正方形并且图像在选项卡前面，所以不会触发 :hover 元素。

我创建了一个 JSFiddle 来演示这个问题: http://jsfiddle.net/hgarrerereyn/a6L5j/

这是 JSFiddle 中的代码:

HTML:

<div id="div1"></div>
<div id="div2"></div>

CSS:

#div1 {
height:50px;
width:50px;
border-radius:50px;
background:red;
position:absolute;
top:0px;
left:0px;
z-index:-1;
}

#div2 {
height:200px;
width:200px;
border-radius:200px;
background:blue;
position:absolute;
top:0px;
left:0px;
}

/* This next part doesnt work :(  */

#div1:hover {
opacity:0.5;
}

如果纯 CSS 不行，我可以使用 jQuery。 感谢任何帮助

Answer 1

如果您希望它在 div2 中的圆上悬停时也发生变化，请尝试设置 pointer-events: none;在重叠的 div 上。

顺便说一句:我正在运行 Safari 测试版并且悬停正在按预期生效。所以另一个答案可能是等待 :)

Working fiddle

#div2 {
  height:200px;
  width:200px;
  border-radius:200px;
  background:blue;
  position:absolute;
  top:0px;
  left:0px;
  pointer-events: none;
}