css hover div1.img1 affect on another div2.img2

Question

css hover div1.img1 affect on another div2.img2

 .img1:hover + .i1 { display: none } 

 <article> <div class="bigimg"> <img id="hauptimg" class="i4" style="position: absolute" src="imgs/k2.jpg" width="394px" height="309px"> <img id="hauptimg" class="i3" style="position: absolute" src="imgs/k1.jpg" width="394px" height="309px"> <img id="hauptimg" class="i2" style="position: absolute" src="imgs/big.jpg" width="394px" height="309px"> <img id="hauptimg" class="i1" style="position: absolute" src="imgs/big2.jpg" width="394px" height="309px"> <div class="clear"></div> </div> <div class="smallimg"> <img id="secondimg" class="img1" src="http://www.bilder-upload.eu/upload/5f6a5a-1467583787.jpg" width="100px" height="100px"> <br> <img id="secondimg" class="img2" src="http://www.bilder-upload.eu/upload/fd6130-1467583927.jpg" width="100px" height="100px"> <br> <img id="secondimg" class="img3" src="http://www.bilder-upload.eu/upload/a2888b-1467583968.jpg" width="100px" height="100px"> </div> </article> 

with + , > , ~ not working

Answer 1

your code has a few mistakes:

• you CAN'T have duplicated ID's, they MUST be unique.
• you shouldn't have inline styles.
• you shouldn't use width / height HTML tags, instead use CSS styles for that.

---

And for this to work (given your current layout shown in your image, you have to use JS, because CSS has no parent selector.

You can achieve your layout using flexbox.

 $(".thumbs img").hover(function() { var src = $(this).attr("src"); $("#hauptimg").attr("src", src); }); 

 article { display: flex; position: relative; width: 500px } .thumbs { display: flex; flex-direction: column; position: absolute; right: 0 } .thumbs img { width: 100px; margin: 0 10px } .preview img { position: absolute; top: 0; left: 0; width: 300px; height: 300px; border: 1px red solid } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <article> <div class="preview"> <img id="hauptimg" src="//www.bilder-upload.eu/upload/5f6a5a-1467583787.jpg" /> </div> <div class="thumbs"> <img id="secondimg1" class="img1" src="http://www.bilder-upload.eu/upload/5f6a5a-1467583787.jpg"> <img id="secondimg2" class="img2" src="http://www.bilder-upload.eu/upload/fd6130-1467583927.jpg"> <img id="secondimg2" class="img3" src="http://www.bilder-upload.eu/upload/a2888b-1467583968.jpg"> </div> </article>