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