html - css hover div1.img1 affect on another div2.img2 -
css hover div1.img1
affect on 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
your code has few mistakes:
- you can't have duplicated id's, must unique.
- you shouldn't have inline styles.
- you shouldn't use
width
/height
html tags, instead use css styles that.
and work (given current layout shown in image, have use js, because css has no parent selector.
you can achieve 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>
Comments
Post a Comment