Highlighted

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

Explorer ,
Oct 31, 2019

Copy link to clipboard

Copied

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

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>

TOPICS
Bootstrap, Code

Views

330

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

Explorer ,
Oct 31, 2019

Copy link to clipboard

Copied

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

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>

TOPICS
Bootstrap, Code

Views

331

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 31, 2019 0
Adobe Community Professional ,
Oct 31, 2019

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 31, 2019 0
LEGEND ,
Oct 31, 2019

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 31, 2019 1
Adobe Community Professional ,
Oct 31, 2019

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 31, 2019 0