下面是完整代码,实现图示效果,效果为出现四个白框,和去除黑色背景。
<!-- 了解更多模块 -->
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
background-color: #D0D0D0;
}
.knowmorbutton
{
width: 100px;
height: 40px;
position: relative;
background-color: #000000;
box-shadow:0px 0px 60px 0.5px #d0d0d0;
}
.knowmorbutton:hover
{
cursor:pointer;
background:transparent;
}
.know-top
{
position: absolute;
right: 0px;
top: 0px;
width: 0px;
height: 5px;
background-color: #FFFFFF;
transition: all 0.2s;
}
.know-left
{
position: absolute;
top: 0px;
left: 0px;
width: 5px;
height: 0px;
background-color: #FFFFFF;
}
.knowmorbutton:hover .know-left
{
height: 35px;
transition: all 0.2s;
cursor:pointer;
}
.know-right
{
position: absolute;
bottom: 0px;
right: 0px;
width: 5px;
height: 0px;
background-color: #FFFFFF;
}
.knowmorbutton:hover .know-right
{
cursor:pointer;
height: 35px;
transition: all 0.2s;
}
.knowmorbutton:hover .know-left
{
height: 35px;
transition: all 0.2s;
}
.knowmorbutton:hover .know-top
{
cursor:pointer;
width: 100px;
}
.know-bottom
{ position: absolute;
left: 0px;
bottom: 0px;
width: 0px;
height: 5px;
background-color: #FFFFFF;
transition: all 0.2s;
}
.knowmorbutton:hover .know-bottom
{
width: 100px;
}
.knowmore
{
color: #FFFFFF;
position: relative;
text-align: center;
top: 7px;
}
</style>
<meta charset="utf-8">
<title></title>
</head>
<body>
</div>
<!-- 了解更多模块 -->
<div class="knowmorbutton">
<div class="know-top">
</div>
<div class="know-left">
</div>
<div class="know-right">
</div>
<div class="know-bottom">
</div>
</div>
</div>
<!-- 了解更多模块 -->
</div>
</body>
</html>
<!-- 了解更多模块 -->
虽然代码看着很长其实原理很简单,使用子类选择器,在.knowmorbutton盒子悬停的同时,让四个盒子出来就行;
四个盒子分别使用绝对定位,定位到四个角,两个不给宽度,两个不给长度。
然后在悬停父类knowbuttton,清除阴影我用的是backgroune:transparent;
核心思想是悬停父类,触发子类效果。定位父相子绝,不影响布局。