javascript - html 中具有相同属性的两个 <div> 层

Question

有没有办法在 html 中放置两层？ 我想做的是放置两个具有相同属性(大小、位置等) 我的目的是当我悬停图像(第一个 div)时，另一个 div 出现(包含背景图像和文本)

我的实际代码是:

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

Answer 1

您可以将 :hover 元素与隐藏一起使用。

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

将 element1 添加到第一个 div 的类，将 element2 添加到第二个 div!

Ps: 抱歉没有测试过，如果它不起作用我很抱歉但值得一试!