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

Question

我看到其他关于影响其他元素的帖子，当一个元素悬停时，但我们可以有类似悬停感知的东西吗？例如，在我的代码中，当我们将鼠标悬停在侧边栏图像上时，描述会显示，但是当您将鼠标悬停在描述上时，悬停图像的效果就会消失。我们可以喜欢 #sidebarimage:hover #description:hover #sidebarimage(:hover) 什么的吗？当我的 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

这似乎是一个错误。来自 W3C CSS 颜色规范:

If an element with opacity less than 1 is not positioned, implementations must paint the layer it creates, within its parent stacking context, at the same stacking order that would be used if it were a positioned element with ‘z-index: 0’ and ‘opacity: 1’.

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

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

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