css盒子的隐藏和显示效果咋做？

发布时间：2023-08-03 14:37:54 所属栏目：语言来源：

导读：这篇文章主要给大家分享css盒子的隐藏和显示效果的实现，需求就是常规就是隐藏效果，显示的时候显示在最上层，例如下面小米电视机这种选购效果，那么这样的隐藏和显示效果怎样做呢？我们直接来看代码：

.imgbox{

这篇文章主要给大家分享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的代码

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=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>

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!