Skip to main content
K
keitha70260201
Known Participant
October 31, 2019
Answered

Is there a way to change the background color of the body tag when hovering over a list item?

  • October 31, 2019
  • 3 replies
  • 712 views

Is there a way to change the background color of the body tag when hovering over a list item?

I would like to acieve this using html and css only. No javascript

 

this is the code I'm using in CSS:

ul li:hover:nth-child(1) a
{
body
{
background-color: #009688;
}

}

the above code just changes the li color. I've also tried the 'background' attribute and it doesnt work?

 

Keith

This topic has been closed for replies.
Correct answer osgood_

You are going to have to get creative IF you want to use css and deploy another container as the <body>:

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>'Body' BgColor Change on Hover</title>
<style>
body {
margin: 0;
}
.bgCol {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -100;
background-color: yellow;
}
.links {
width: 30%;
margin: 0 auto;
padding: 50px;
}
.links li {
cursor: pointer;
padding: 10px 0;
}
.links li:nth-child(1):hover ~ .bgCol {
background: orange;
}
.links li:nth-child(2):hover ~ .bgCol {
background: blue;
}
.links li:nth-child(3):hover ~ .bgCol {
background: green;
}
</style>
</head>
<body>
<div class="links">
<li>Orange</li>
<li>Blue</li>
<li>Green</li>
<li class="bgCol"></li>
</div>

</body>
</html>

3 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
October 31, 2019

I'm not even going to ask why you want to do this.  But what about the majority of users who don't have a mouse to hover with?   Touch screen devices are more common now than ever before.

Nancy O'Shea— Product User & Community Expert
O
osgood_Correct answer
Legend
October 31, 2019

You are going to have to get creative IF you want to use css and deploy another container as the <body>:

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>'Body' BgColor Change on Hover</title>
<style>
body {
margin: 0;
}
.bgCol {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -100;
background-color: yellow;
}
.links {
width: 30%;
margin: 0 auto;
padding: 50px;
}
.links li {
cursor: pointer;
padding: 10px 0;
}
.links li:nth-child(1):hover ~ .bgCol {
background: orange;
}
.links li:nth-child(2):hover ~ .bgCol {
background: blue;
}
.links li:nth-child(3):hover ~ .bgCol {
background: green;
}
</style>
</head>
<body>
<div class="links">
<li>Orange</li>
<li>Blue</li>
<li>Green</li>
<li class="bgCol"></li>
</div>

</body>
</html>

    Jon Fritz
    Community Expert
    Jon FritzCommunity Expert
    Community Expert
    October 31, 2019

    I'm surprised the above code does anything, it's pretty malformed for CSS.

    Technically, you can't use CSS to change an element's parent by hovering the child, it would cause conflicts with how css works. There are ways to fake it, using positioned elements, sibling selectors, and z-index shenaniganry, but it would likely require a re-write of your entire page. 

    This is something javascript does with ease. Is there a particular reason you don't want to use it?

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices