将鼠标悬停在链接上时更改正文背景

Question

我想设置我的页面，以便当用户将鼠标悬停在 div 中的链接上时，主体背景的颜色会发生变化，但仅在悬停时发生。 这是css

body {
  background-color: black;
}

a {
  color: white;
  text-decoration: none;
}

a:hover {
  color: white;
  background-color: transparent;
  text-decoration: underline;
}

Answer 1

当您询问是否有父选择器时，您想要做的实际上是不可能的 CSS，但我们可以使用一些解决方法。

这里有一个想法，我使用伪元素从a我使其覆盖全身，它表现为身体的背景：

 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>

Answer 2

简短回答：目前还不可能在纯 CSS 中这样做，但是......

长答案：有一个伪类:has()可以选择具有特定属性的元素。 在你的情况下，它会是这样的： body:has(div a:hover) 。

不幸的是，它还没有支持。

但是，可以使用 HTML <input>和<label>元素来做到这一点，除非您不能更改<body>元素的background-color ，因为<body>开始标记是由浏览器在任何应该在内部的元素之前自动生成的无论它实际写在代码中的哪个位置。

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

Answer 3

它不是很漂亮，但是您可以在body上使用:before伪元素

<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/

将鼠标悬停在链接上时更改正文背景

问题描述

3 个解决方案

解决方案1
0 已采纳 2018-02-26 21:03:31

解决方案2
0 2018-02-26 21:18:25

解决方案3
0 2018-02-26 21:22:00

将鼠标悬停在链接上时更改正文背景

问题描述

3 个解决方案

解决方案1 0 已采纳 2018-02-26 21:03:31

解决方案2 0 2018-02-26 21:18:25

解决方案3 0 2018-02-26 21:22:00

解决方案1
0 已采纳 2018-02-26 21:03:31

解决方案2
0 2018-02-26 21:18:25

解决方案3
0 2018-02-26 21:22:00