Changing body background when hovering over a link

后端未结

关注

 3  1830

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

相关标签:

3条回答

一生所求

2020-12-11 14:34
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%;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

抹茶落季

2020-12-11 14:38

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

http://jsfiddle.net/bjsvhze8/13/

0 讨论(0)

佛祖请我去吃肉

2020-12-11 14:48
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>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...