How to change body color when hovering over a div

Question

I'm currently coding a very basic page for my friend and he said he wanted a box which would change color depending on which link he hovers over. I've tried a few things but none of it seem to work.

This is how the body looks:

body {
  color: #fff;
  background: #98adca;
  text-align: center;
  margin: 275px auto;
}
#box {
  padding: 30px;
  border: solid;
}
li {
  list-style: none;
  text-decoration: none;
}
a,
a:hover,
a:active,
a:visited {
  color: #fff;
  text-decoration: none;
}
.twt:hover {
  background: #c3c0d1;
  color: #fff;
}

<div id="box">
  <h1><a href="{BlogURL}">social media</a></h1>
  <div class="twt">
    <li><a href="#">twitter</a>
    </li>
  </div>
  <div class="ig1">
    <li><a href="#">art instagram</a>
    </li>
  </div>
  <div class="ig2">
    <li><a href="#">regular instagram</a>
    </li>
  </div>
  <div class="fb">
    <li><a href="#">facebook</a>
    </li>
  </div>
  <div class="yt">
    <li><a href="#">youtube</a>
    </li>
  </div>
</div>

But I don't get how I should write the CSS to make the box another color when just, for example, hovering over the YouTube link. In my current CSS only the background of the text is changed when hovering and not the entire box.

CSS can not select parent elements; what you want is not possible using this HTML structure. — CBroe, Oct 19 '16 at 22:12
It seems you want to trigger a change on the parent if the child is being hovered on..this is may not be possible for now...see http://stackoverflow.com/questions/8114657/how-to-style-the-parent-element-when-hovering-a-child-element...if you want to trigger a change in the child if the parent is hovered..now then that's possible... — repzero, Oct 19 '16 at 22:12
Do you mean something like this? https://jsfiddle.net/ob017pr6/1/ — justDan, Oct 19 '16 at 22:14

score 2 · Answer 1 · answered Oct 19 '16 at 22:16

Try using jQuery with the "onmouseover" event:

HTML:

<div id="box">
  <a onmouseover="colorChange()" onmouseout="revert()" href="#">Link</a>
</div>

Javascript:

function colorChange() {
  $("#box").css("background-color", "red");
}
function revert() {
  $("#box").css("background-color", "lightgrey");
}

Here is my pen: http://codepen.io/Hudson_Taylor11/pen/ozQogO

Hope this helps!

cup_of · Answer 2 · 2016-10-19T22:23:29.957

1

Use jQuery:

$(".twt").hover(
    function() {
        $("#box").css( "background-color", "#000" );
    },
    function() {
        $("#box").css( "background-color", "#98adca" );
    }  
);

Let me know if you need help setting up jQuery.

edited Oct 19 '16 at 22:23

answered Oct 19 '16 at 22:10

cup_of

6,397
9
47
94

score 1 · Answer 3 · answered Oct 19 '16 at 22:41

From what I know. CSS doesn't be made to walk backward. All I can think about the way I can do is using jQuery to do that.

$(document).ready(function(){
  $('.ig1 li a').hover(function(){
    $('#box').css({'background-color': 'green'});
  });
  $('.ig2 li a').hover(function(){
    $('#box').css({'background-color': 'blue'});
  });
  $('.yt li a').hover(function(){
    $('#box').css({'background-color': 'red'});
  });
  
  $('.fb li a').hover(function(){
    $('#box').css({'background-color': 'pink'});
  });
  
});

body {
            color: #fff;
            background: #98adca;
            text-align: center;
            margin: 275px auto;
            padding: 30px;
        }
      #box {
        border: 3px solid #fff;
        padding: 30px;
      }
        li {
            list-style:none;
            text-decoration:none;
        }
        a, a:hover, a:active, a:visited {
            color: #fff;
            text-decoration:none;
        }
        .twt:hover {
            background: #c3c0d1;
            color: #fff;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="box">
    <h1><a href="{BlogURL}">social media</a></h1>
    <div class="twt">
        <li><a href="#">twitter</a></li>
    </div>
    <div class="ig1">
        <li><a href="#">art instagram</a></li>
    </div>
    <div class="ig2">
        <li><a href="#">regular instagram</a></li>
    </div>
    <div class="fb">
        <li><a href="#">facebook</a></li>
    </div>
    <div class="yt">
        <li><a href="#">youtube</a></li>
    </div>
</div>
</body>

score 0 · Answer 4 · edited May 23 '17 at 12:19

Right, so I started thinking, you can do it with JS, but can you do it with pure CSS.
Short answer - No.
CSS does not allow child elements to access parent elements, because of security and other concerns. A simple Google search will show you all the things I read, there's no point of sharing docs here.

But what if we trick the user, right, just hear me out.

Instead of changing the colour of the parent, which is illegal, let's change the colour of a sibling - allowed by CSS Link

So I unified your classes, for the links to share the same class (they still have separate IDs, chill). I then added a "pretend div" which will serve the purpose of the body. I stylised the "pretend", the unified div and added a "sibling on hover" CSS rule. Take a look:

HTML`

<body>
<div class="box">
    <h1><a href="{BlogURL}">social media</a></h1>
    <div class="link_divs" id="div_1">
        <li><a href="#">twitter</a></li>
    </div>
    <div class="link_divs" id="div_2">
        <li><a href="#">art instagram</a></li>
    </div>
    <div class="link_divs" id="div_3">
        <li><a href="#">regular instagram</a></li>
    </div>
    <div class="link_divs" id="div_4">
        <li><a href="#">facebook</a></li>
    </div>
    <div class="link_divs" id="div_5">
        <li><a href="#">youtube</a></li>
    </div>
    <div id="pretend_div">
    </div>
</div>
</body>

And here's the CSS

body {
        color: #fff;
        background: #98adca;
        text-align: center;
        margin: 275px auto;
        padding: 30px;
        border: 3px solid #fff;
        height: 100%;
    }
    li {
        list-style:none;
        text-decoration:none;
    }
    a, a:hover, a:active, a:visited {
        color: #fff;
        text-decoration:none;
    }

    /* IMPORTANT - This will be the new "body" */
    #pretend_div{
        position: absolute; /* REQUIRED */
        width: 96%;         /* Matching your body size */
        height: 180px;      /* Matching your body size */
        border: 1px solid red; /* Differentiating made easy */
        top:0;              /* IMPORTANT - push the element to the top */
        left: 0;            /* IMPORTANT - push the element to the left */
        margin: 275px auto; /* Grabbed the margin from your body */
        padding: 30px;      /* Grabbed the padding from your body */
        z-index: -1;        /* IMPORTANT - push the element to the back of stack */
    }
    /* IMPORTANT - generic link class */
    .link_divs{
        z-index: 0;         /* IMPORTANT - set the links on-top of the pretend div */
        position: relative; /* IMPORTANT - positioning */
    }

    /* What link you hover over ~ The pretend div */
    #div_1:hover ~ #pretend_div{
        background-color: #00A000; /* change bck colour */
    }
    #div_2:hover ~ #pretend_div{
        background-color: orangered;
    }
    #div_3:hover ~ #pretend_div{
        background-color: darkgoldenrod;
    }

REMARKS I'm aware this is not the best solution, honestly - just use JS. But I wanted to try and make it happen with pure CSS. Now I tried to match the pretend div to your body as best I could, thus it looks, well, not as good as it could. I added some comments to help you understand what is happening with each line. The ones that use the "sibling style" CSS are marked by Important. Everything else is just matching your body style.

JSFiddle Demo -> DEMO LINK

Hope that helps

score -1 · Answer 5 · answered Oct 19 '16 at 22:01

-1

instead of background try background-color

answered Oct 19 '16 at 22:01

Frederik van Vliet

21
1
3

it's still the same – Linnea Kleibrant Oct 19 '16 at 22:05

How to change body color when hovering over a div

5 Answers5