CODEWITHSUNDEEP
csshovercss-selectors
Timothy Eberly
Timothy Eberly

Reputation: 11

CSS: Change the background when hovering over the content

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

Answers (1)

Pevara
Pevara

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

Related Questions