Hover эффект на текст

150

06 мая 2019, 16:40

Нужно чтобы при наведении на текст менялась картинка и текст сам менял цвет. Я написал так, но не знаю как изменение цвета текста сделать после определенной картинки.

Kак это реализовать?

.pic { 
  background-image: url(img/1.png); 
  width: 236px; 
  height: 420px; 
  transition: 1s; 
  background-size: cover; 
} 
 
p1:hover~.pic { 
  background-image: url(img/11.png); 
} 
 
p2:hover~.pic { 
  background-image: url(img/16.png); 
} 
 
p3:hover~.pic { 
  background-image: url(img/5.png); 
} 
 
p4:hover~.pic { 
  background-image: url(img/8.png); 
}

<p1 style="cursor: pointer; font-size: 24px; color: #1A264A;"> 
  text1 
</p1> 
<p2 style="cursor: pointer; font-size: 24px; color: #1A264A;"> 
  Text2 
</p2> 
<div class="pic" style="border-radius: 20px;"></div> 
<p3 style="cursor: pointer; font-size: 24px; color: #1A264A;"> 
  Text3 
</p3> 
<p4 style="cursor: pointer; font-size: 24px; color: #1A264A;"> 
  Text4 
</p4>

Answer 1

Чтобы сам текст менял цвет, достаточно прописать это в ховере:

p:hover { 
  color: red; 
}

<p>ТЕКСТ</p>

А чтобы все картинки менялись, надо поставить блок .pic ПОСЛЕ ВСЕХ абзацев, потому что символ ~ означает "элемент, идущий после", и если он идёт перед, то ховер не сработает.