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>

enter image description here

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

Popular posts from this blog

java - Static nested class instance -

c# - Bluetooth LE CanUpdate Characteristic property -

JavaScript - Replace variable from string in all occurrences -