css - 仅使用 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;} 默认情况下，但需要更改为 #000 当 .whiteImg 可见时。我试过用 jQuery(和它的颜色插件)解决这个问题，但是动画发生在 CSS 动画之后。所以我正在寻找一种纯 CSS 解决方案，以*在显示 .whiteImg 的同时将 body color 更改为黑色。

有没有办法做到这一点？我正在寻找类似于

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

灵感来自 this post 的末尾但显然实际上不起作用。

谢谢。

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/