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

标签 css hover css-selectors

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

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

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

最佳答案

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

关于CSS:将鼠标悬停在内容上时更改背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17603480/

相关文章:

html - 带渐变的对 Angular 线背景效果(渐变内渐变)

javascript - d3js 图表 : how to use clip-path to limit the length of a line to specific bounding box

html - CSS - 在 UL 的类中调用 id 以在悬停时显示 div

css - 检查 :nth-child css rule 中的元素编号

需要 CSS Column Divs 帮助

javascript - 使用 jQuery 显示没有特定类的随机 div

css - :hover wont work when using display:table-cell on dropdown nav

jquery - 悬停时更改显示属性

jquery - 使用 jQuery 选择器选择有 child 但没有孙子的元素

css - 有没有办法用 :empty pseudo class? 忽略空白