javascript - Why css animation dose not work on external elements? -


the following code working fine

.wrapper {      position: relative;      overflow: hidden;      width: 100px;      height: 100px;       border: 1px solid black;  }    #slide {      position: absolute;      left: -100px;      width: 100px;      height: 100px;      background: blue;      transition: 1s;  }    .wrapper:hover #slide {      transition: 1s;      left: 0;  }
<div class="wrapper">      <img id="slide" src="http://lorempixel.com/output/cats-q-c-100-100-4.jpg" />  </div>

but if place img tag outside of wrapper code not works in case can do? if place img tag outside of wrapper code not works in case can do? if place img tag outside of wrapper code not works in case can do?

.wrapper {      position: relative;      overflow: hidden;      width: 100px;      height: 100px;       border: 1px solid black;  }    #slide {      position: absolute;      left: -100px;      width: 100px;      height: 100px;      background: blue;      transition: 1s;  }    .wrapper:hover #slide {      transition: 1s;      left: 0;  }
<html>  <div class="wrapper">      </div>    <img id="slide" src="http://lorempixel.com/output/cats-q-c-100-100-4.jpg" />  </html>

thanks in advance :)

you can use sibling selector +:

.wrapper:hover + #slide

example:

.wrapper {      position: relative;      overflow: hidden;      width: 100px;      height: 100px;       border: 1px solid black;  }    #slide {      position: absolute;      left: -100px;      width: 100px;      height: 100px;      background: blue;      transition: 1s;  }    .wrapper:hover + #slide {      transition: 1s;      left: 0;  }
<html>  <div class="wrapper">      </div>    <img id="slide" src="http://lorempixel.com/output/cats-q-c-100-100-4.jpg" />  </html>


-

Comments

Post a Comment