Question

伙计们，所以基本上我有点卡住了，交易就是这样，我需要悬停的div是在我需要触发的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>

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

Answer 1

是的，您需要重新排列#layout 内的DIV（），然后让 flex css 为您安排。像这样：

<强>被修改

＆＃13;

#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;
}

＆＃13;

<!--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>

＆＃13;

div div如何使其他div的图像生动

1 个答案: