javascript - 悬停时背景过渡修复和背景变暗[里面的 fiddle ]

Question

我完全陷入了困境。我有一个带有背景图像的容器。容器内有 3 个小圆圈。我想做的是当我将鼠标悬停在背景图像上时缩放背景图像，当我将鼠标悬停在 3 个小圆圈中的任何一个上时使背景图像变暗。

我到达了 3 个圆圈正确重叠容器并且悬停时背景放大的地步。但是我有两个问题

没有。 1 我不太喜欢我实现圆圈叠加的方式，就是这段代码

    #circle_wrap{
    position: absolute; 
    margin-top: -130px;
    }

没有。 2 是我不知道如何调暗背景。我的初衷是隐藏一个不透明度为 0.5 的黑色容器，当我将鼠标悬停在其中一个圆圈上时会显示该容器。但我不知道如何选择叠加层。

JSFIDDLE here

如果仅用 css 无法解决任何问题，我也会接受 jquery 解决方案。

我正在寻找你们提供的任何建议/技巧/解决方案，我真的需要让它工作。 谢谢。

Answer 1

最后很生气我不能用我用 jquery 做的 css :( 如果有人感兴趣here is the result 我至少用更好的 css 解决了第一个问题，但第二个问题是用 jquery 完成的。

用

解决了第一个问题

.circle_wrap{
position: absolute; bottom: 0; width: 100%; height: 100px;
}

并在其父对象上应用position:relative

2号的解决方案是

$(".circle_wrap").hover(function () {
  $(this).siblings("img").css("opacity", "0.2");
  },
  function () {
    $(this).siblings("img").css("opacity", "1");
});

编辑: Safari 支持

.wrap img:hover{
-moz-transition: scale(1.1) rotate(0deg);
transform: scale(1.1) rotate(0deg);
-webkit-animation-name: scaleThis;
-webkit-animation-duration:5s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function:ease-in-out;
}
@-webkit-keyframes scaleThis {
0% { -webkit-transform:scale(1) rotate(0deg); }
10% { -webkit-transform:scale(1.1) rotate(0deg); }
100% {-webkit-transform:scale(1.1) rotate(0deg); }
}