It is necessary that when you hover over the word, the picture changes and the corresponding one appears. I do, but I only change when hovering for the last word. Where is the mistake?

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

    • Thank! And if you need to replace not one image with 2 or more pictures. How then to be? - timur
    • 2 pictures background in one block? - Air
    • something like that, I mean, when you hover on slovo1, one picture appeared and after a second another one. and so with every word - timur
    • Timur, this option that you implemented is very limited .... css is not capable of anything else ... What you described in the last comment can be implemented with js - Air
    • Can you show on js about how it should be? - timur