. img box{
width: 1200px;
h ei ght: 612px;
m arg in-right: auto;
mar gin -left: auto;
margin -t op: 60px;
}
.m1{
border: solid;
border-width: 1px;
height: 300px;
width: 227px;
}
# m1img{
text-align: center ;
padding-top: 55px;
}
#img2{
margin-bottom: 35px;
}
p>span {
text-decoration:line-t hr ough;
}
#where1{
pos IT ion: absolute;
left:412px;
top: 60px;
}
#where2{
position: absolute;
left:651px;
top: 60px;
}
#where3{
position: absolute;
left:890px;
top: 60px;
}
#where4{
position: absolute;
left:1129px;
top: 60px;
}
#where5{
position: absolute;
left:412px;
top: 372px;
}
#where6{
position: absolute;
left:651px;
top: 372px;
}
#where7{
position: absolute;
left:890px;
top: 372px;
}
#where8{
position: absolute;
left:1129px;
top: 372px;
}
#sbox{
height:76px;
width: 227px;
background-color: #ff6700;
opacity: 0;/*隐身*/
z -i ndex:999;
position: absolute;
bottom: -0.5px;
}
#where1:hover #sbox{
opacity: 1;
}
#where2:hover #sbox{
opacity: 1; (显示)
}
#where3:hover #sbox{
opacity: 1;
}
#where4:hover #sbox{
opacity: 1;
}
#where5:hover #sbox{
opacity: 1;
}
#where6:hover #sbox{
opacity: 1;
}
#where7:hover #sbox{
opacity: 1;
}
#where8:hover #sbox{
opacity: 1;
}
#sbo xp {
line-height: 76px;
color: white;
}
&nbs p;
HT ML 的代码
@H_ 126 _14@ <!DOCTY PE html> <html> <head> <title></title> < ;m eta charset="utf-8"> <meta n am e="viewport" content="width=device-width, initial -s cale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie= Edge " /> <link rel="stylesheet" type="text/css" href="css/1.css"> <link rel="stylesheet" type="text/css" href="css/normalize.css"> </head> <body> <div class="imgbox"> <img src="images/mi.png"> <div class="m1" id="where1"> <div id="m1img"> <div id="img2"><img src="images/m1.png"></div> <p> 小米 电 视3</p> <p>999元 <span>1199元</span></p> <div id="sbox"><p id="sboxp">小米电视促销</p></div> </div> </div> <div class="m1" id="where2"> <div id="m1img"> <div id="img2"><img src="images/m2.png"></div> <p>小米电视5</p> <p>1099元 <span>1399元</span></p> <div id="sbox"><p id="sboxp">小米电视促销</p></div> </div> </div> <div class="m1" id="where3"> <div id="m1img"> <div id="img2"><img src="images/m3.png"></div> <p>小米电脑</p> <p>4999元 <span>5199元</span></p> <div id="sbox"><p id="sboxp">小米电脑促销</p></div> </div> </div> <div class="m1" id="where4"> <div id="m1img"> <div id="img2"><img src="images/mi4.png"></div> <p>小米电脑</p> <p>5999元 <span>6199元</span></p> <div id="sbox"><p id="sboxp">小米电脑促销</p></div> </div> </div> <div class="m1" id="where5"> <div id="m1img"> <div id="img2"><img src="images/m1.png"></div> <p>小米电视3</p> <p>999元 <span>1199元</span></p> <div id="sbox"><p id="sboxp">小米电视促销</p></div> </div> </div> <div class="m1" id="where6"> <div id="m1img"> <div id="img2"><img src="images/m2.png"></div> <p>小米电视5</p> <p>1099元 <span>1399元</span></p> <div id="sbox"><p id="sboxp">小米电视促销</p></div> </div> </div> <div class="m1" id="where7"> <div id="m1img"> <div id="img2"><img src="images/m3.png"></div> <p>小米电脑</p> <p>4999元 <span>5199元</span></p> <div id="sbox"><p id="sboxp">小米电脑促销</p></div> </div> </div> <div class="m1" id="where8"> <div id="m1img"> <div id="img2"><img src="images/mi4.png"></div> <p>小米电脑</p> <p>5999元 <span>6199元</span></p> <div id="sbox"><p id="sboxp">小米电脑促销</p></div> </div> </div> </div> </body> </html>
总结
到此这篇关于CSS 盒子 隐藏/显示后再最上层的实现代码的 文章 就介绍到这了,更多相关css 盒子隐藏内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
总结
以上是 为你收集整理的 CSS盒子隐藏/显示后再最上层的实现代码 全部内容，希望文章能够帮你解决 CSS盒子隐藏/显示后再最上层的实现代码 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于CSS盒子隐藏/显示后再最上层的实现代码的详细内容...