用hover相互配合(纯css)position完成网页页面动态性

日期:2020-09-24 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站

如上网页页面实际效果用js很非常容易完成,但用纯css完成此动态性作用,意在加深对hover和position精准定位的了解。与大伙儿共享,欢迎纠正。

能够看到,这类实际效果最底层是a标识,hover情况中平白无故弹出1个解释框,大家称为元素2。那末要想让元素2完成弹出实际效果并且不危害最底层a标识的排布,明显应当用相对性精准定位。因而确立了hover相互配合position的基础方式。大家以a标识为相对性精准定位的标准,编码以下:

css

拷贝编码
编码以下:

a{
display:block;
height:30px;
width:30px;
background-color:green;
float:left;
margin-left:10px;
position:relative;
}
a span{
display:hidden;
}
a:hover{
background-color:red;
}
a:hover span{
width:100px;
height:50px;
background-color:yellow;
display:block;
position:absolute;
left:35px;
top:5px;
}

html

拷贝编码
编码以下:

<body>
<a href="###"><span></span></a>
<a href="###"><span></span></a>
<a href="###"><span></span></a>
</body>

完成的实际效果以下图所示(黄色span为元素2,翠绿色为a标识,a标识hover时为鲜红色):

能够看到,hover加position精准定位完成了弹出解释框的实际效果。但明显这并不是大家要想的实际效果,重要在于怎样使元素2遮盖到a标识上面来。在当代访问器中很简易,大家给span设定z-index特性即可:

a:hover span{z-index:1;}

当代访问器中完成实际效果以下:

这就是大家要想的实际效果,可是在ie6中…

能够看到万恶的ie6又兼容问题了,明显z- index沒有起功效,那末如何才可以让元素2遮盖a标识呢,历经很多试验我发现,元素2用来精准定位的标准标识的弟兄标识是会遮盖元素2的。比如上图,第3个 a标识遮盖了元素2,是由于元素2是以第2个a标识为标准精准定位的。寻找缘故,那末处理这个适配难题也很非常容易,只需在a标识内再嵌套循环1个标 签<em>,大家让元素2以<em>为标准精准定位,就会发现a标识不可以再遮盖元素2了(尽管<em>還是会遮盖元素 2,但em是空标识,并且能够设为掩藏,因而无危害)。编码以下:

css

拷贝编码
编码以下:

a{
display:block;
height:30px;
width:30px;
background-color:green;
float:left;
margin-left:10px;
}
a em{
display:block;
height:30px;
width:30px;
position:relative;
}
a span{
display:hidden;
}
a:hover{
background-color:red;
}
a:hover span{
width:100px;
height:50px;
background-color:yellow;
display:block;
position:absolute;
left:35px;
top:5px;
z-index:1;
}

html

拷贝编码
编码以下:

<body>
<a href="###"><em><span></span></em></a>
<a href="###"><em><span></span></em></a>
<a href="###"><em><span></span></em></a>
</body>

 这样在ie6中也能完善运作了,最后根据纯css完成了可以适配的如本文开始的网页页面动态性实际效果!