0

编辑： 这似乎只是 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。任何帮助表示赞赏

4

1 回答 1

2

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

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

工作小提琴

#div2 {
  height:200px;
  width:200px;
  border-radius:200px;
  background:blue;
  position:absolute;
  top:0px;
  left:0px;
  pointer-events: none;
}
于 2013-07-22T19:34:30.947 回答