1

我有一个背景图像不断变化的网站，悬停在某些元素上。图像通常很暗，但有时很亮。灯光图像具有.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 解决方案来*同时body color将更改变为黑色，.whiteImg如图所示。

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

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

这受到这篇文章结尾的启发，但显然实际上并不起作用。

谢谢。

4

2 回答 2

2

这是我能想到的唯一纯 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/

于 2013-09-16T12:43:08.507 回答
0

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

它还说明了另一种 jQuery 方法：

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

在您的情况下，这将是：

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

在触发图像更改时运行它。

或者，为了更容易，您可以在开始淡入新图像时向正文添加或删除一个类。

body {
    color: #000;
    transition: color 0.4s;
}

body.negative { color: #fff; }
于 2013-09-16T12:36:30.440 回答