html 这么将盒子隐藏,CSS盒子隐藏/显示后再最上层的实现代码

.imgbox{

width: 1200px;

height: 612px;

margin-right: auto;

margin-left: auto;

margin-top: 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-through;

}

#where1{

position: 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-index: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;

}

#sboxp{

line-height: 76px;

color: white;

}

HTML的代码

小米电视3

999元 1199元

小米电视促销

小米电视5

1099元 1399元

小米电视促销

小米电脑

4999元 5199元

小米电脑促销

小米电脑

5999元 6199元

小米电脑促销

小米电视3

999元 1199元

小米电视促销

小米电视5

1099元 1399元

小米电视促销

小米电脑

4999元 5199元

小米电脑促销

小米电脑

5999元 6199元

小米电脑促销

总结

到此这篇关于CSS盒子隐藏/显示后再最上层的实现代码的文章就介绍到这了,更多相关css 盒子隐藏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！