仅使用 CSS3 在其子级悬停时更改元素的样式

Question

>我有一个网站，将鼠标悬停在某些元素上，背景图像不断变化。图像通常是黑暗的，但有时是浅色的。灯光图像具有应用于它们的类.whiteImg。

我已经让它只适用于 CSS，通过将"背景"图像设置为悬停元素的同级。例如：

.HTML：

<ul>
  <li>
    <a>link 1</a>
    <img src="http://foo.com/" />
  </li>
  <li>
    <a>link 2</a>
    <img src="http://foo.com/" />
  </li>
  <li>
    <a>link 3</a>
    <img src="http://foo.com/" class="whiteImg" />
  </li>
</ul>

.CSS：

img{
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  opacity: 0;
  transition: opacity 1s;
}
li a:hover + img{
opacity: 1;
}

现在一切正常。但是默认情况下我有body{color: #fff;}，但是当.whiteImg可见时，需要将其更改为#000。我尝试使用 jQuery（它是颜色插件）解决此问题，但动画发生在 CSS 动画之后。所以我正在寻找一个纯粹的 CSS 解决方案来*在显示.whiteImg的同时将body color更改为黑色。

有没有办法这样做？我正在寻找类似的东西

 li a:hover + img.whiteImg < body {
    color: #000;
 }

这是受本文结尾的启发，但显然实际上不起作用。

谢谢。

Answer 1

这是我

能想到的唯一纯CSS解决方案：

http://jsfiddle.net/7K83g/3/

li, li * {
    position: relative;
    z-index: 2;
}
.whiteImg ~ .fakebg {
    display: block;
    position: absolute;
    z-index: 1;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: black;
}

这是一个 100% 的解决方案，使用direction: rtl将正确的位置应用于链接。

改用jQuery：

 $(document.body).toggleClass("dark");

.CSS：

 .dark { background: black; color: white; }

会做这个伎俩。
示例：http://jsfiddle.net/QKAh6/

Answer 2

正如您引用的帖子所暗示的那样，>选择器是一个愿望，而不是实际的实现。现实情况是您无法在CSS中选择父级。

它还陈述了另一种jQuery方法：

$('p:has(img)');

在您的情况下，这将是：

$('body:has(img.whiteImg)').css('color', '#fff');

只需在触发映像更改时运行此按钮即可。

---

或者，为了方便起见，您可以在新图像中开始淡出时向正文添加或删除类。

body {
    color: #000;
    transition: color 0.4s;
}
body.negative { color: #fff; }