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

148
29 апреля 2019, 18:30

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

.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>

Answer 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); 
}
<p1 style="cursor: pointer;">slovo 1</p1> 
<p2 style="cursor: pointer;">slovo 2</p2> 
 
<div class="pic"></div>

READ ALSO
Не работет :hover в выподающем меню
HTML

Не работет :hover в выподающем меню

В общем я хочу чтобы объекты классаline при наведении на

 164
div сразу по div
HTML

div сразу по div

Подскажите пожалуйста, есть 4 блока:

 132
Эфект при наведение мышкой css
HTML

Эфект при наведение мышкой css

при наведение на ссылку она меняет свой цвет во так

 153
Как разделить регистрационную форму на 2 части
HTML

Как разделить регистрационную форму на 2 части

Есть большая регистрационная форма с более чем 20+ полямиИдея заключается в следующем, разделить ее на две формы, в 1 форму оставить обязательные...

 139