Как вы получаете доступ к div в различных оболочках с помощью CSS?

Question

Я пытаюсь поговорить с div, который находится не в той же оболочке, что и div, над которым я нахожусь.Я использую следующий код, чтобы изменить цвет фона изображения div, когда элемент div находится над ним, и они оба находятся внутри div navBar:

.navBar .home:hover ~ div.picture {
    background:#900; }

Если я помещаю home или изображение в другой элемент div,Я не могу получить к ним доступ.

Кто-нибудь знает, как это обойти?

Answer 1

Вы не сможете получить доступ к элементам, которые не являются потомками или последующими братьями и сестрами из элемента, который находится только с помощью селекторов CSS3. Вам придется выбрать маршрут JavaScript, чтобы сделать то, что вы хотите, с другой структурой.

Answer 2

Здесь C входит в таблицы стилей.Каскадирование означает, что вы только сможете пройти под и по сторонам дерева, под которым вы работаете.

Чтобы манипулировать элементами div вне дерева, вам нужно пройти маршрут JSвыше или просто очень простой jquery, такой как

$(.navBar .home).hover(function () {
  $(div.picture).css("background-color","#900");
  }, 
  function () {
  $(div.picture).css("background-color","#FFF");
});