Смена картинки на CSS. Анимация

#html #css #вёрстка #css_animation

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



.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);
}
slovo 1
slovo 2
slovo 3
slovo 4





    

Ответы

Ответ 1

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);
}
slovo 1
slovo 2