CODEWITHSUNDEEP
htmlcss
Linnea Kleibrant
Linnea Kleibrant

Reputation: 11

How to change body color when hovering over a div

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.

Upvotes: 1

Views: 1761

Answers (5)

MSarandev
MSarandev

Reputation: 101

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

Upvotes: 0

Gfie
Gfie

Reputation: 11

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>

Upvotes: 1

cup_of
cup_of

Reputation: 6687

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.

Upvotes: 1

Hudson Taylor
Hudson Taylor

Reputation: 1162

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!

Upvotes: 2

Frederik van Vliet
Frederik van Vliet

Reputation: 21

instead of background try background-color

Upvotes: -1

Related Questions