如何在div悬停使其他div的图像生动(How on div hover make other div's image animate)

如何在div悬停使其他div的图像生动(How on div hover make other div's image animate)

伙计们，所以基本上我有点卡住，交易就是，我需要悬停的div是在我需要触发的图像div下面，我不知道该怎么做，我需要这样做CSS。 简单来说就是左边有花车的布局，所以改变位置很难形成我。 有任何想法吗？ 这里的HTML代码

<div id="layout"> <div id="zydra"><img src="1blokopav.jpg"></div> <div id="zalia"> </div> <div id="melyna"></div> <div id="geltona"></div> <div id="orandzine"></div> <div style="clear: both;"></div> <div id="ruda"></div> <div id="raudona"></div> <div id="balta"></div> </div>

需要悬停在具有id的melyna的div上触发zydra id图像的div所有的div都被赋予浮动左边和某种宽度和高度，它是简单的颜色块布局，很想听听你们的建议，如果没有如何将包含图像的div移动到底部，它不会改变布局

guys so basically I'm a bit stuck, the deal is that, the div that i need to hover on is under the div which image i need to trigger, I have no idea how to do that, and i need to do this with css. Simply it is layout with floats to left, so changing positions is hard form me. Any ideas? here html code

<div id="layout"> <div id="zydra"><img src="1blokopav.jpg"></div> <div id="zalia"> </div> <div id="melyna"></div> <div id="geltona"></div> <div id="orandzine"></div> <div style="clear: both;"></div> <div id="ruda"></div> <div id="raudona"></div> <div id="balta"></div> </div>

need to hover on div which has id of melyna to trigger div of zydra id image all of divs are given float left and some kind of width and height, it's simple color block layout, would love to hear your guys suggestions and if there is no way, how to move my div which contains image to bottom that it won't change layout

最满意答案

是的，您需要在#layout内部重新排列DIV ，并让flex css为您安排它。 像这样：

编辑

#layout {
  display: flex;
  /*this property will normalize the layout*/
  flex-direction: row-reverse;
  flex-wrap: wrap-reverse;
}
#layout div {
  flex: 1 0 20%;
  height: 100px;
  border: 1px solid green;
}
#layout div#melyna:hover ~ div>img {
  opacity: .5;
  height: 5px;
  width: 15px;
}
#layout div:nth-child(n+5) {
  flex: 1 0 33.3%;
  background-color: lime;
}
div>img {
  transition: 2s all linear;
} 
  
<!--here you have to arrange back forward-->
<div id="layout">
  <div id="zalia"></div>
  <div id="melyna">hover me</div>
  <div id="geltona"></div>
  <div id="orandzine"></div>
  <!--clear: both-->
  <div id="ruda"></div>
  <div id="raudona"></div>
  <div id="balta"></div>
  <div id="zydra">
    <img src="http://www.w3schools.com/html/pic_mountain.jpg" width="100%" height="100%">
  </div>
</div> 
  
 
Yes you need to rearrange DIVs inside #layout upside down and let the flex css arrange it back for you. like this:
 
Edited
 
 
 
  
  
#layout {
  display: flex;
  /*this property will normalize the layout*/
  flex-direction: row-reverse;
  flex-wrap: wrap-reverse;
}
#layout div {
  flex: 1 0 20%;
  height: 100px;
  border: 1px solid green;
}
#layout div#melyna:hover ~ div>img {
  opacity: .5;
  height: 5px;
  width: 15px;
}
#layout div:nth-child(n+5) {
  flex: 1 0 33.3%;
  background-color: lime;
}
div>img {
  transition: 2s all linear;
} 
  
<!--here you have to arrange back forward-->
<div id="layout">
  <div id="zalia"></div>
  <div id="melyna">hover me</div>
  <div id="geltona"></div>
  <div id="orandzine"></div>
  <!--clear: both-->
  <div id="ruda"></div>
  <div id="raudona"></div>
  <div id="balta"></div>
  <div id="zydra">
    <img src="http://www.w3schools.com/html/pic_mountain.jpg" width="100%" height="100%">
  </div>
</div>