CSS при наведении изменить div - PullRequest
Новая
       1

CSS при наведении изменить div

0 голосов
/ 27 июня 2018

У меня есть следующий код, и в основном я пытаюсь изменить CSS для div, который находится внутри другого div и не может заставить его отвечать, когда div, который нужно изменить, находится внутри другого div вне контекста элемента hover . 

<style>
    p.hometown:hover > #test  { 
        background: yellow;
    }

#test {   background: blue;}

</style>
</head>
<body>

<p>My name is Donald.</p>
<p class="hometown">I live in Ducksburg.</p>

<p>My name is Dolly.</p>
<p class="hometown">I also live in Ducksburg.</p>
<div id="tt">
<div id="test">dfgfdg</div></div>

Я пробовал несколько методов, таких как: 

p.hometown:hover #tt+#test  { 
    background: yellow;
}

также 

p.hometown:hover > #test  { 
    background: yellow;
}

Ни одна из этих попыток не работает. Если я удалю div tt, то все будет работать нормально. Проблема в том, что я пытаюсь использовать этот метод на квадратном пространстве, чтобы исправить там ограничения. НЕТ JAVASCRIPT И НЕ МОЖЕТ БЫТЬ ПРЕДУПРЕЖДЕНО.

1 Ответ

0 голосов
/ 27 июня 2018

Вы почти хороши, НО вам нужно сначала нацелиться на родительский div. Вы также можете использовать ~ вместо +, чтобы это работало для всех p с классом .hometown: 

p.hometown:hover ~ #tt > #test {
  background: yellow;
}

#test {
  background: blue;
}
<p>My name is Donald.</p>
<p class="hometown">I live in Ducksburg.</p>

<p>My name is Dolly.</p>
<p class="hometown">I also live in Ducksburg.</p>
<div id="tt">
  <div id="test">dfgfdg</div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...