4

Нужно чтобы при наведении на слово менялась картинка и появлялась соответствующая. Я делаю, но у меня только меняется при наведении на последнее слово. В чем ошибка?

.pic {
  background-image: url(https://pp.userapi.com/c10106/u78663797/d_220b9246.jpg);
  width: 336px;
  height: 600px;
  transition: 1s;
}

p1:hover+.pic {
  background-image: url(https://cdn1.flamp.ru/4f1fded18c548c909cc4bdda9cfdb33c_100_100.jpg);
}

p2:hover+.pic {
  background-image: url(https://d37ta6l1gshlok.cloudfront.net/user-thumbnail/4049/22787178_0-100.jpg);
}

p3:hover+.pic {
  background-image: url(https://pp.userapi.com/c7008/v7008345/66190/-1evfBqn24E.jpg?ava=1);
}

p4:hover+.pic {
  background-image: url(https://pp.userapi.com/c10058/u88208531/d_01d64824.jpg);
}
<p1 style="cursor: pointer;">slovo 1</p1>
<p2 style="cursor: pointer;">slovo 2</p2>
<p3 style="cursor: pointer;">slovo 3</p3>
<p4 style="cursor: pointer;">slovo 4</p4>

<div class="pic"></div>

1 ответ 1

3

p1:hover ~ .pic

.pic {
  background-image: url(https://pp.userapi.com/c10106/u78663797/d_220b9246.jpg);
  width: 336px;
  height: 600px;
  transition: 1s;
  background-size: contain;
}

p1:hover,
p2:hover {
  color: red;
}

p1:hover~.pic {
  background-image: url(https://cdn1.flamp.ru/4f1fded18c548c909cc4bdda9cfdb33c_100_100.jpg);
}

p2:hover~.pic {
  background-image: url(https://pp.userapi.com/c7008/v7008345/66190/-1evfBqn24E.jpg?ava=1);
}
<p1 style="cursor: pointer;">slovo 1</p1>
<p2 style="cursor: pointer;">slovo 2</p2>

<div class="pic"></div>

7
  • Спасибо! А если нужно чтобы не на одна картинку заменить на 2 или больше картинок. Как тогда быть?
    – timur
    18 ноя 2018 в 14:49
  • 2 картинки фоновые в один блок?
    – Air
    18 ноя 2018 в 14:57
  • вроде того, имею ввиду при наведении на slovo1 появлялась одна картинка и через секунду уже другая. и так с каждым словом
    – timur
    18 ноя 2018 в 15:39
  • Timur, этот вариант который ты реализовал, очень ограничен.... css на большее не способен... То что ты описал в последнем комментарии можно реализовать с js
    – Air
    18 ноя 2018 в 18:09
  • можете показать на js примерно как должно быть?
    – timur
    19 ноя 2018 в 10:18

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.