CSS:将鼠标悬停在内容上时更改背景

时间:2013-07-11 21:03:34

标签: css hover css-selectors

只使用CSS是否可以将鼠标悬停在会影响身体背景的页面上的元素上?

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

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

1 个答案:

答案 0 :(得分:2)

你不能直接,因为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;
}