有没有办法在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>

最佳答案

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

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


将element1添加到第一个div的类中,并将element2添加到第二个div!

附:抱歉,尚未测试,如果无法正常工作,很抱歉,但是值得尝试!

10-07 19:11
查看更多