Нажмите на изображение, измените фон текста - PullRequest
Новая
       0

Нажмите на изображение, измените фон текста

0 голосов
/ 27 мая 2018

Я использую хак из этого ответа, чтобы изменить размер изображения при клике (метод флажка).Работает нормально.Однако, когда я пытаюсь также применить стиль CSS к тексту при клике по изображению, он не работает: 

<html>
<body>
  <input type="checkbox" id="img-box"/>
  <label for = "img-box">
    <img src="http://www.al-van.org/AV/Manners_files/greeneyedcat.jpg"/>
  </label>

  <p id="some-text">
    some text
  </p>
</body>
</html>


#img-box:checked + label > img  {
    width: 100px;

}

#img-box:checked + p  {
    background-color: red;

}

В чем здесь моя ошибка и как ее исправить?

Jsfiddle: https://jsfiddle.net/eus18r3h/

Ответы [ 2 ]

0 голосов
/ 27 мая 2018

Вы использовали соседний братский комбинатор (+) для тега абзаца, но он работает, только если у вас есть один элемент за другим.Таким образом, поскольку у вас есть тег label между ними, он не работает.Если вы просто замените + на общий брат-комбинатор ~, код должен работать.

#img-box:checked ~ p{
    background-color: red;
}
0 голосов
/ 27 мая 2018

Элемент ввода с идентификатором «img-box» не является прямым братом по тегу p.# img-box: флажок + p будет отображать только тег ap, который находится непосредственно рядом с входом, между ними есть метка.

Это будет искомый селектор '# img-box: флажок+ ярлык + р '

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...