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;
}
What you want to do is actually not possible with CSS as you are asking if there is a parent selector BUT we can use some workarounds.
Here is an idea where I use a pseudo element from the a
that I make it to cover the whole body and it behaves as the background of the body:
a { color: white; text-decoration: none; } a:before { content: ""; position: fixed; top: 0; right: 0; left: 0; bottom: 0; background: #000; z-index: -1; pointer-events:none; } a:hover::before { background: red; }
<a href="#">link</a>
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%;
}
It's not very pretty, but you can use the :before
pseudo-element on body
<a class="change-bg" href="">link 1</a>
CSS:
body {
background: #fff;
}
a.change-bg:hover:before {
content:'';
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
background-color: #000;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.