Question

我看到其他关于影响其他元素的帖子，当一个人徘徊时，但是我们可以拥有像悬停的东西吗？例如，在我的代码中，描述显示我们将鼠标悬停在侧边栏图像上，但当您将鼠标悬停在描述上时，悬停图像的效果会消失。我们可以喜欢#sidebarimage：悬停#description：悬停#sidebarimage（：悬停）还是什么？当我的courser在描述上时（图像上方），我希望图像保持褪色（当它徘徊时产生的效果）。我无法绕过它。谢谢。

https://www.dropbox.com/s/atyrxbvs246bpmt/Screenshot%202014-11-07%2010.09.21.png?dl=0

#sidebarimage img:hover {
-webkit-transition: opacity 0.6s linear;
opacity: 0.5;
z-index:1;
}

#sidebarimage:hover #description {
    margin-top:-50%;
    z-index:200;
          opacity:1;
          -moz-transition-duration:0.6s;
          -webkit-transition-duration:0.6s;
          -o-transition-duration:0.6s;
     }

Answer 1

这似乎是一个错误。从CSS颜色的W3C规范：

如果未定位不透明度小于1的元素，则实现必须在其父堆叠上下文中以相同的堆叠顺序绘制它创建的层，如果它是具有'z-index的定位元素，则使用该堆叠顺序： 0'和'不透明度：1'。

在您的代码中，#description的不透明度为1，因此不会在堆叠顺序中分配位置。因此，它会在图像后面绘制，现在该图像的不透明度为0.5。但是，如果您为#description分配了非1值，则它似乎显示正确。

看看这个JSFiddle。尝试将不透明度设置为1并观察差异。我在#description周围添加了红色背景，以便更容易看到。

有关更多详细信息，您可以查看此相关的StackOverflow问题：
css opacity affecting sibling image opacity

影响已经悬停的元素，当另一个元素悬停时

1 个答案: