Как применить child:hover, но не parent:hover

Со следующим HTML, когда я нависаю над ребенком, я получаю зеленый фон на родителе. Как я могу мешать этому произойти? Я действительно хочу зеленый фон, если я толплюсь за пределами дочернего элемента.

CSS3 прекрасен.

.parent {
  padding: 100px;
  width: 400px;
  height: 400px;
}

.parent:hover {
  background-color: green;
}

.child {
  padding: 100px;
  width: 200px;
  height: 200px;
}

.child:hover {
  background-color: blue;
}
<div class="parent">
  <div class="child">Child</div>
</div>
11
задан Calvin Nunes 3 October 2019 в 14:26
поделиться

4 ответа

Так что это ДЕЙСТВИТЕЛЬНО некрасиво, но работает (вроде как). Я в основном создаю дубликат родителя как родного брата ребенка. родительская перезапись по умолчанию скрыта, а затем отображается при наведении курсора на дочерний элемент. Chrome не любит это, если вы не используете селектор + вместо селектора ~. Это не очень масштабируемо, но может работать.

Как писали другие ребята, javascript, вероятно, будет лучшим решением.

  <стиль> .parent {отступ: 100 пикселей; ширина: 400 пикселей; высота: 400 пикселей; положение: относительное; z-индекс: 998; } .parent: hover {цвет фона: зеленый; }.ребенок {отступ: 100 пикселей; ширина: 200 пикселей; высота: 200 пикселей; положение: относительное; z-индекс: 1000; } .child: hover {цвет фона: синий; } .parent-overwrite {дополнение: наследовать; ширина: наследовать; рост: наследовать; позиция: абсолютная; верх: 0; слева: 0; z-индекс: 999; цвет фона: #FFF; дисплей: нет; } .child: hover ~ .parent-overwrite {display: block; }  
Дочерний
8
ответ дан 3 December 2019 в 08:54
поделиться

Я могу сделать это только с добавлением дополнительной разметки. Необходимо добавить пустой div, который по сути функционирует как родительский фон. Взгляните на CSS здесь.

Часть HTML :

  <div class="parent">
    Parent
    <div class="child">
      Child
      <div class="grandson">
        Grandson
        <div class="grandson-bg"></div>
      </div>
      <div class="child-bg"></div>
    </div>
    <div class="parent-bg"></div>
  </div>

Часть CSS :

article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; }

  .parent { display: block; position: relative; z-index: 0;
            height: auto; width: auto; padding: 25px;
          }

  .parent-bg { display: block; height: 100%; width: 100%; 
               position: absolute; top: 0px; left: 0px; 
               border: 1px solid white; z-index: 0; 
             }
  .parent-bg:hover { border: 1px solid red; }

  .child { display: block; position: relative; z-index: 1; 
           height: auto; width: auto; padding: 25px;
         }

  .child-bg { display: block; height: 100%; width: 100%; 
              position: absolute; top: 0px; left: 0px; 
              border: 1px solid white; z-index: 0; 
            }
  .child-bg:hover { border: 1px solid red; }

  .grandson { display: block; position: relative; z-index: 2; 
              height: auto; width: auto; padding: 25px;
            }

  .grandson-bg { display: block; height: 100%; width: 100%; 
                 position: absolute; top: 0px; left: 0px; 
                 border: 1px solid white; z-index: 0; 
               }
  .grandson-bg:hover { border: 1px solid red; }

http://jsbin.com/ubiyo3/edit

3
ответ дан 3 December 2019 в 08:54
поделиться

Самым простым может быть использовать JS для такого рода CSS. Может быть, вы можете попытаться переосмыслить свою реализацию. Почему вы пытаетесь сделать что-то подобное?

1
ответ дан 3 December 2019 в 08:54
поделиться

Это невозможно при использовании обычного CSS. Вы запрашиваете псевдокласс дочернего элемента ( child: hover ), чтобы воздействовать на объявление background родителя. Невозможно указать такие вещи с помощью обычного CSS.

Это определенно можно сделать с помощью javascript.

1
ответ дан 3 December 2019 в 08:54
поделиться
Другие вопросы по тегам:

Похожие вопросы: