层的隐藏

最新推荐文章于 2023-05-04 00:20:41 发布

Abenazhan

最新推荐文章于 2023-05-04 00:20:41 发布

阅读量807

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/Abenazhan/article/details/72850401

版权

CSS 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

效果：鼠标移动到当前层，显示出另一个隐藏的层
逻辑：设置两个层在同一个位置，隐藏层设置属性display：none；，鼠标移动上去设置伪类元素属性display：block；
设置位置的时候，可以先设置所在的外层为相对位置，相当于固定个盒子，里面层设置绝对位置，这个绝对位置就是相对于刚设置的盒子的位置，利用top ，left进行位置固定。

HTML代码：

<div class="zc">

<div class="zc1"><div class="zc3"><div class="zz12">会员风采<img src="./image/12.jpg"></div>

<div class="zc4">

<div class="htt"><img src="./image/18.jpg">

<div class="yin"><br>[食品分会]<br><br><b>刘德华</b>&nbsp广告设计 排版设计</div>

</div>

<div class="htt1"><img src="./image/18.jpg">

<div class="yin1"><br>[食品分会]<br><br><b>刘德华</b>&nbsp广告设计 排版设计</div>

</div>

<div class="htt2"><img src="./image/19.jpg">

<div class="yin2"><br>[食品分会]<br><br><b>刘德华</b>&nbsp广告设计 排版设计</div>

</div>

<div class="htt3"><img src="./image/20.jpg">

<div class="yin3"><br>[食品分会]<br><br><b>刘德华</b>&nbsp广告设计 排版设计</div>

</div>

</div>





<style>
.zc4

{

width:100%;

height:190px;

float:left;

margin-left:5px;

position:relative;

}

.htt

{

width:233px;

height:190px;

position:absolute;

top:3px;

}

.htt:hover

{

border:1px solid #032f86;

}

.htt:hover .yin

{

display:block;

}

.htt1

{

width:233px;

height:190px;

position:absolute;

top:3px;

left:240px;

}

.htt1:hover

{

border:1px solid #032f86;

}

.htt1:hover .yin1

{

display:block;

}

.htt2

{

width:233px;

height:190px;

position:absolute;

top:3px;

left:480px;

}

.htt2:hover

{

border:1px solid #032f86;

}

.htt2:hover .yin2

{

display:block;

}

.htt3

{

width:233px;

height:190px;

position:absolute;

top:3px;

left:720px;

}

.htt3:hover

{

border:1px solid #032f86;

}

.htt3:hover .yin3

{

display:block;

}

.yin

{

width:233px;

height:100px;

font-size:16px;

font-family:"微软雅黑";

color:#ffffff;

background:#032f86;

position:absolute;

top:92px;

display:none;

}



.yin1

{

width:233px;

height:100px;

font-size:16px;

font-family:"微软雅黑";

color:#ffffff;

background:#032f86;

position:absolute;

top:92px;

display:none;

}



.yin2

{

width:233px;

height:100px;

font-size:16px;

font-family:"微软雅黑";

color:#ffffff;

background:#032f86;

position:absolute;

top:92px;

display:none;

}



.yin3

{

width:233px;

height:100px;

font-size:16px;

font-family:"微软雅黑";

color:#ffffff;

background:#032f86;

position:absolute;

top:92px;

display:none;

} 
</style>