有没有办法在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!
附:抱歉,尚未测试,如果无法正常工作,很抱歉,但是值得尝试!