HTML中具有相同属性的两个<div>层

时间:2018-10-05 16:31:27

标签: javascript html css

有没有办法在html中放置两层? 我想做的就是把两个具有相同的属性(大小,位置等) 我的目的是当我将鼠标悬停在图片(第一格)上时,另一格显示(包含背景图片和文字)

我的实际代码是:

.row {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    padding: 0 4px;
    margin-right: 20%;
    margin-left: 10%;   
    margin-top: 4%;  
    width: 100%;
    height: 100%;
    position: fixed;
    overflow: auto;
}

/* Create four equal columns that sits next to each other */
.column {
    -ms-flex: 25%; /* IE10 */
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
}

.column img {
    margin-top: 8px;
    vertical-align: middle;
}

 }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .column {
        -ms-flex: 100%;
        flex: 100%;
        max-width: 100%;
    }
}
    <div class="row"> 
        <div class="column"> 
          <img src="images/Layer 3.png" style="width:100%" onClick="myFunc(this.id);">
          <img src="images/Layer 6.png" style="width:100%">
          <img src="images/Layer 4.png" style="width:100%">
          <img src="images/Layer 4.png" style="width:100%">
          <img src="images/Layer 4.png" style="width:100%">
          </div> 
          <div class="column"> 
          <img src="images/Layer 6.png" style="width:100%">
          <img src="images/Layer 12.png" style="width:100%">
          <img src="images/Layer 4.png" style="width:100%">
          <img src="images/Layer 7.png" style="width:100%">
          </div> 
          <div class="column"> 
          <img src="images/Layer 9.png" style="width:100%">
          <img src="images/Layer 8.png" style="width:100%">
         </div>
      </div>
    </div>

1 个答案:

答案 0 :(得分:0)

You could use the :hover element together with hiding.

element1:hover{
    display: none; 
} > element2{
    display: inline;
}

Add element1 to the first div's class and element2 to the second div!

Ps: sorry haven't tested, if it doesn't work I'm sorry but it is worth trying!