CSS: Change the background when hovering over the content

Question

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>

No. See http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector for more info. — dsgriffin, Jul 11 '13 at 21:04
You could [fake it](http://jsfiddle.net/TWt2D/), although I would never recommend it. I would instead use JavaScript — My Head Hurts, Jul 11 '13 at 21:17

score 2 · Answer 1 · answered Jul 11 '13 at 21:16

2

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;
}

answered Jul 11 '13 at 21:16

Pevara

13,749
1
31
44

1

Nice solution, but there is always the backwards compatibility argument for using the `:before` pseudo-selector: [browser-support-pseudo-element](http://css-tricks.com/browser-support-pseudo-elements/). However, this is definitely a work around I would use if I was avoiding JavaScript – My Head Hurts Jul 11 '13 at 21:20
1

@MyHeadHurts fortunately I do no longer have to support IE7 (best new years gift ever), so I can use pseudo elements as much as I please. Good point tough... – Pevara Jul 11 '13 at 21:33
I believe this is what I was looking for. Thanks! – Timothy Eberly Jul 12 '13 at 13:16

CSS: Change the background when hovering over the content

1 Answers1