Question

修改这似乎只是Safari上的一个问题

编辑2： 最新的Safari beta修复了这个问题

这是我的问题：

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

问题是，因为圆形图像上的边界框是方形的，而图像位于标签的前面，所以：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 beta并且悬停正在按预期生效。所以另一个答案可能是等待：）

Working fiddle

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

：悬停不会触发，因为边界框阻碍了

1 个答案: