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%;
}
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…