将鼠标悬停在链接上时更改主体背景 [英] Changing body background when hovering over a link

问题描述

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

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

推荐答案

使用CSS实际上无法实现您想要的操作，因为您询问是否有父选择器，但是我们可以使用一些解决方法.

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.

这里是一个想法，我使用a中的伪元素使它覆盖整个身体，并且其行为与身体的背景相同:

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>

这篇关于将鼠标悬停在链接上时更改主体背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！