Change body background color on hover

Question

         <div class="projects-list home-1">
                <article class="whispers">
                    <h1>Whispers</h1>
                    <figure>
                        <a href="/projects/whispers.html">
                           <img src="assets/media/images/whispers.jpg"alt=""
                        </a>
                    </figure>
                </article>
                <article>
                    <h1>Victoria</h1>
                    <figure>
                        <a href="projects/after-august.html">
                           <img src="assets/media/images/victoria.jpg"alt=""
                        </a>
                    </figure>
                </article>

                <article>
                    <h1>for sasha</h1>
                    <figure>
                        <a href="projects/for-sasha.html">
                            <img src="assets/media/images/fosasha.jpg"alt=""
                        </a>
                    </figure>
                </article>

                <article>
                    <h1>old and blue</h1>
                    <figure>
                        <a href="projects/old-and-blue.html">
                         <imgsrc="assets/media/images/oldandblue.jpg"alt="">
                        </a>
                    </figure>
                </article>

                <article>
                    <h1>offf barcelona</h1>
                    <figure>
                        <a href="projects/offf-barcelona.html">
                            <img src="/assets/media/images/offf-barcelona.jpg" alt="">
                        </a>
                    </figure>
                </article>

         </div>

Now I want to change the body tag background to a different color on hover on any of those images like for example for the first image makes the background black an the second makes it red etc..

So my question is: Is there is any way to select another element on CSS on hover?

For example:

article:hover { here i want to say like body: background = 'whatever' }

Just like how we change things in JS. I made it in JS, but I feel like there must be an easier CSS way

https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector — ksav, Oct 25 '18 at 06:36
No... there is no easier CSS way... to style parent according child you must use JS or jquery — לבני מלכה, Oct 25 '18 at 06:42

ksav · Answer 1 · 2018-10-26T21:10:41.300

Unfortunately there is no parent/ancestor selector in CSS. So you will need a JS solution to style the body or an ancestor element.

You can do this without jQuery easily.

const elements = document.querySelectorAll('article');

elements.forEach(elem => {
  elem.addEventListener("mouseenter", function(event) {
    const bg = document.querySelector('.projects-list')

    const color = event.target.getAttribute("data-color");

    bg.style.backgroundColor = color;
  }, false)
})

.projects-list {
  padding: 20px;
}

img {
  width: 100%;
}

<div class="projects-list home-1">
  <article data-color="orange" class="whispers">
    <h1>Whispers</h1>
    <figure>
      <a href="">
        <img src="https://placeimg.com/640/480/any" alt="" </a>
    </figure>
  </article>

  <article data-color="purple">
    <h1>Victoria</h1>
    <figure>
      <a href="#">
        <img src="https://placeimg.com/640/480/any" alt="" </a>
    </figure>
  </article>

  <article data-color="blue">
    <h1>for sasha</h1>
    <figure>
      <a href="#">
        <img src="https://placeimg.com/640/480/any" alt="" </a>
    </figure>
  </article>

  <article data-color="red">
    <h1>old and blue</h1>
    <figure>
      <a href="#">
        <img src="https://placeimg.com/640/480/any" alt="">
      </a>
    </figure>
  </article>

  <article data-color="green">
    <h1>offf barcelona</h1>
    <figure>
      <a href="#">
        <img src="https://placeimg.com/640/480/any" alt="">
      </a>
    </figure>
  </article>

</div>

score 0 · Accepted Answer · answered Oct 25 '18 at 06:50

$(document).ready(function(){
$('img').mouseover(function(){
  $('body').css('background-color',$(this).data('color'));
});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="projects-list home-1">
                <article class="whispers">
                    <h1>Whispers</h1>
                    <figure>
                        <a href="/projects/whispers.html">
                           <img class="img" src="https://picsum.photos/200/200?random"alt="" data-color="pink">
                        </a>
                    </figure>
                </article>
                <article>
                    <h1>Victoria</h1>
                    <figure>
                        <a href="projects/after-august.html">
                           <img src="https://picsum.photos/200/200?random"alt="" data-color="grey">
                        </a>
                    </figure>
                </article>

                <article>
                    <h1>for sasha</h1>
                    <figure>
                        <a href="projects/for-sasha.html">
                            <img src="https://picsum.photos/200/200?random"alt="" data-color="red">
                        </a>
                    </figure>
                </article>

                <article>
                    <h1>old and blue</h1>
                    <figure>
                        <a href="projects/old-and-blue.html">
                         <img src="https://picsum.photos/200/200?random"alt="" data-color="green">
                        </a>
                    </figure>
                </article>

                <article>
                    <h1>offf barcelona</h1>
                    <figure>
                        <a href="projects/offf-barcelona.html">
                            <img src="https://picsum.photos/200/200?random" alt="" data-color="blue">
                        </a>
                    </figure>
                </article>

         </div>
         </body>

Use js to achieve this. Hope this will help you.

Thank you so so much, you really did me a great favor, god bless you — Taste of Leaving, Oct 25 '18 at 17:53

score 0 · Answer 3 · answered Oct 25 '18 at 07:25

Here is the complete bunch of code. I would like to apologise in advance as I made some changes.

<!DOCTYPE html>
<html>
<head>
<style>
body   {  background:#e5e5e5;}
.projects-list-home-1{
text-align:center;
}

.whispers{
text-decoration:none;
}


</style>
<script>
function bgChange(bg) {
    document.body.style.background = bg;
}
</script>
</head>
<body>
<div class="projects-list-home-1">
                <article>
                    <h1>Whispers</h1>
                    <figure>
                        <a href="/projects/whispers.html"  onmouseover="bgChange(this.style.backgroundColor)" 
        onmouseout="bgChange('transparent')" style="background-color:Khaki" class="whispers">
                           <img src="assets/media/images/whispers.jpg"alt=""
                        </a>
                    </figure>
                </article>
                <article>
                    <h1>Victoria</h1>
                    <figure>
                        <a href="projects/after-august.html" onmouseover="bgChange(this.style.backgroundColor)" 
        onmouseout="bgChange('transparent')" style="background-color:Palegreen" class="whispers">
                           <img src="assets/media/images/victoria.jpg"alt=""
                        </a>
                    </figure>
                </article>

                <article>
                    <h1>for sasha</h1>
                    <figure>
                        <a href="projects/for-sasha.html" onmouseover="bgChange(this.style.backgroundColor)" 
        onmouseout="bgChange('transparent')" style="background-color:Orange" class="whispers">
                            <img src="assets/media/images/fosasha.jpg"alt=""
                        </a>
                    </figure>
                </article>

                <article>
                    <h1>old and blue</h1>
                    <figure>
                        <a href="projects/old-and-blue.html">
                         <imgsrc="assets/media/images/oldandblue.jpg"alt="">
                        </a>
                    </figure>
                </article>

                <article>
                    <h1>offf barcelona</h1>
                    <figure>
                        <a href="projects/offf-barcelona.html">
                            <img src="/assets/media/images/offf-barcelona.jpg" alt="">
                        </a>
                    </figure>
                </article>

         </div>
</body>


</html>

Please feel free to ask if you need to know anything else. – zaman Oct 25 '18 at 07:27 — zaman, Oct 25 '18 at 07:27

Change body background color on hover

3 Answers3