Стиль дочерний элемент при наведении на родительский элемент

155

Как изменить стиль дочернего элемента при наведении указателя мыши на родительский элемент. Я бы предпочел CSS решение для этого, если это возможно. Есть ли какое-либо решение, возможно, через: наведите CSS селекторы. На самом деле мне нужно изменить цвет панели параметров внутри панели, когда на панели есть наведение.

Нужна поддержка всех основных браузеров.

css css-selectors Раджат Гупта
источник

274

Да, вы определенно можете сделать это. Просто используйте что-то вроде

.parent:hover .child {
   /* ... */
}

Согласно этой странице он поддерживается всеми основными браузерами.

jtbandes
источник

8

Спасибо, вы только что помогли мне оживить мою веб-страницу с помощью CSS3.

Ник Тарас

1

Наконец-то выучил достаточно CSS, чтобы знать, о чем просить, спасибо за помощь! Обратите внимание, что это относится ко всем потомкам, если вы просто хотите детей, я думаю, что вам нужно .parent:hover > .child?

Уильям Т. Маллард

10

Да, вы можете сделать это, используя приведенный ниже код, который может вам помочь.

.parentDiv{
margin : 25px;

}
.parentDiv span{
  display : block;
  padding : 10px;
  text-align : center;
  border: 5px solid #000;
  margin : 5px;
}

.parentDiv div{
padding:30px;
border: 10px solid green;
display : inline-block;
align : cente;
}

.parentDiv:hover{
  cursor: pointer;
}

.parentDiv:hover .childDiv1{
border: 10px solid red;
}

.parentDiv:hover .childDiv2{
border: 10px solid yellow;
} 
.parentDiv:hover .childDiv3{
border: 10px solid orange;
}

<div class="parentDiv">
<span>Hover me to change Child Div colors</span>
  <div class="childDiv1">
    First Div Child
  </div>
  <div class="childDiv2">
    Second Div Child
  </div>
  <div class="childDiv3">
    Third Div Child
  </div>
  <div class="childDiv4">
    Fourth Div Child
  </div>
</div>

Развернуть фрагмент

Икбал паша
источник

11

Так поздно для вечеринки

Дерия

5

Этот ответ выиграл бы от некоторого объяснения. Мне кажется, что здесь больше кода, чем нужно, и неясно, на какой части кода мы должны сосредоточиться.

Пол Руни

0

Вы можете использовать это тоже

.parent:hover * {
   /* ... */
}

Развернуть фрагмент

м Qmarsi
источник

Вы можете объяснить немного больше своего ответа?

Массимо

Стиль дочерний элемент при наведении на родительский элемент

Ответы: