0

Нужно чтобы когда я наводил мышь на :before (зелёный блок), он менял цвет на синий. А если я наведу мышь на красный блок - ничего не должно произойти. P.s. конечно, внутрь #block можно поместить ещё один див типа id="before", но мне нужен именно ":before".

#block {
  width: 250px;
  height: 250px;

  background: #f00;
}
#block:before {
  content: "hello";

  cursor: pointer;
  display: block;
  padding: 10px;

  transform: translateX(100%);

  color: #fff;
  background: #0f0;
}

/* не работает */
#block:before:hover {background: #00f}
<div id="block"></div>

6
  • потому что .block:hover::before надо
    – teran
    4 июн 2021 в 9:32
  • 1
    before - это псевдо элемент, он не следит за тем, есть над ним кто-то или нет
    – Grundy
    4 июн 2021 в 9:33
  • На mdn написано, что :hover может применяться к любому псевдоэлементу: developer.mozilla.org/ru/docs/Web/CSS/:hover, или я что-то не так понимаю? А из-за :hover:before, бефор будет становиться синим даже если навести курсор на красный блок (а такого быть не должно).
    – helloworld
    4 июн 2021 в 9:59
  • 1
    это в русской версии mdn написано. в оригинале этого нет. мозилла в инспекторе не дает выставить руками hover для псевдоэлементов.
    – teran
    4 июн 2021 в 12:18
  • 1
    @helloworld, можно поставить pointer-events: none для #block и pointer-events: all для ::before, тогда сработает .block:hover::before
    – Grundy
    4 июн 2021 в 20:54

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.