I would like to set up my page so that when the user hovers over a link in a div, the color of the body background is changed, but only while hovering. This is the css
body {
background-color: black;
}
a {
color: white;
text-decoration: none;
}
a:hover {
color: white;
background-color: transparent;
text-decoration: underline;
}
Short answer: It's not possible to do so in pure CSS yet, however...
Long answer:
There's a pseudoclass :has() that can select element, that has specific properties. In your case it would be something like this: body:has(div a:hover).
Unfortunatelly, it has no support yet.
However it's possible to do so using HTML <input> and <label> elements except you can't change background-color of <body> element, because <body> start tag is generated automatically by the browser before any element that should be inside it no matter where in code it's actually written.
HTML:
<body>
<input id="magic" type="checkbox">
<div>
<label for="magic"><a href="#">Link</a></label>
</div>
</body>
CSS:
html, body, div {
margin: 0;
height: 100%;
}
#magic:hover + div {
background: red;
}
input {
position: fixed;
left: -100%;
}
