Reputation: 11
Using just CSS is it possible to hover over an element on a page that would affect the body background?
I basically want to change the background "bg" of the page if they hover over the class "article" within that page.
<body class="bg">
<div class="article"></div>
</body>
Upvotes: 1
Views: 1087
Reputation: 14308
you can't directly, as css can't move up the DOM tree (yet).
You can however mimic the effect, by adding a pseudo element with background to your article , and making that cover up the entire background.
Have a look at this: 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;
}
Upvotes: 2