Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
459 views
in Technique[技术] by (71.8m points)

html - Changing body background when hovering over a link

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;
}
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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%;
}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...