Изменение фона тела при наведении на ссылку

Question

Изменение фона тела при наведении на ссылку

0

Я хотел бы настроить свою страницу так, чтобы, когда пользователь наводил курсор на ссылку в div, цвет фона тела изменяется, но только во время зависания. Это css

body {
  background-color: black;
}

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

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

DaveGG2009 26 фев. 2018, в 22:55

Источник

Теги:

html

css

3 ответа

0

Короткий ответ: Это невозможно сделать в чистом CSS, однако...

Длинный ответ: существует псевдокласс :has() который может выбрать элемент, имеющий определенные свойства. В вашем случае это будет примерно так: body:has(div a:hover).

К несчастью, у него пока нет поддержки.

Однако это можно сделать с помощью элементов HTML <input> и <label> кроме того, вы не можете изменить background-color элемента <body>, потому что <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%;
}

Tomáš123 26 фев. 2018, в 18:32

0

Это не очень красиво, но вы можете использовать :before псевдоэлементом на 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/

Mateus Miguel 26 фев. 2018, в 18:25

Ещё вопросы

Temani Afif · Accepted Answer · 2018-02-26T19-16-00.000Z

То, что вы хотите сделать, на самом деле невозможно с 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: -2;
}

a:hover::before {
  background: red;
}

/* Use another element to block the hover on the before*/
.overlay {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: -1;
}

<span class="overlay"></span>
<a href="#">link</a>