CSS：将鼠标悬停在内容上时更改背景答案

【问题标题】：CSS: Change the background when hovering over the contentCSS：将鼠标悬停在内容上时更改背景
【发布时间】：2013-07-10 07:42:36
【问题描述】：

仅使用 CSS 是否可以将鼠标悬停在页面上会影响正文背景的元素上？

如果他们将鼠标悬停在该页面中的“文章”类上，我基本上想更改页面的背景“bg”。

<body class="bg"> <div class="article"></div> </body>

【问题讨论】：

没有。请参阅stackoverflow.com/questions/1014861/… 了解更多信息。
你可以fake it，虽然我永远不会推荐它。我会改为使用 JavaScript

标签： css hover css-selectors

【解决方案1】：

你不能直接，因为 css 还不能向上移动 DOM 树。

但是，您可以通过在文章中添加带背景的伪元素来模仿效果，并使其覆盖整个背景。

看看这个：http://jsfiddle.net/QRrnj/

.article:hover:before {
    content:'';
    z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(http://placekitten.com/500/500) no-repeat center;
    background-size: cover;
}

【讨论】：

不错的解决方案，但使用:before 伪选择器总是存在向后兼容性参数：browser-support-pseudo-element。但是，如果我避免使用 JavaScript，这绝对是我会使用的解决方法
@MyHeadHurts 幸运的是我不再需要支持 IE7（有史以来最好的新年礼物），所以我可以随心所欲地使用伪元素。好点强硬...
我相信这就是我想要的。谢谢！