Question

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

我到达了3个圆圈与容器正确重叠并且背景在悬停时放大的点。但我有2个问题

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

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

否。 2我不知道如何调暗背景。我的初衷是拥有一个隐藏的黑色竞争者，当我将鼠标悬停在其中一个圆圈上时会显示0.5不透明度。但我无法弄清楚如何选择叠加层。

JSFIDDLE here

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

我正在寻找你们的任何建议/提示/解决方案，我真的需要让它发挥作用。谢谢。

Answer 1

终于生气了我无法用css做到这一点我用jquery做了:( 如果有人有兴趣here is the result 我至少用更好的css解决了问题1，但第二个用jquery完成了。

用

解决了1号问题

.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");
});

编辑：野生动物园支持

.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); }
}

背景过渡修复和背景暗淡悬停[小提琴里面]

1 个答案: