Demo是这样子的:
麻烦之处在于当鼠标移动到骑士和火箭上是增加的border会与外面的div的border重叠
就像这样:
这样显然不好,一点都不美观
那怎么变美观呢?
我们先把结构弄出来:
<div class="tab">
<ul>
<li><a href="javascript:;">骑士</a></li>
<li><a href="javascript:;">绿军</a></li>
<li><a href="javascript:;">勇士</a></li>
<li><a href="javascript:;">湖人</a></li>
<li><a href="javascript:;">火箭</a></li>
</ul>
</div>
其中一个解决方法是li:hover时把li的border覆盖掉div.tab的border,这样子看就是一条border,而不会出现两条border
那怎么实现呢?
从html结构可以看到ul是div里面的东西,所以它会一直在div里面,而覆盖掉border就需要把ul给弄出来,
我们可以利用position:absolute绝对定位,把ul给弄出来;
那我们就来实现吧
.tab {
width: 298px;
height: 98px;
margin: 100px;
border: 1px solid #eee;
position: relative;}
.tab ul {
height: 27px;
position: absolute;
width: 300px;//因为外面的div的宽度为:298px+两个1px的border = 300px;
left:-1px;//我们向左浮动1px的距离,这1px就是border的宽
.tab li {
float: left;
width: 58px;//见padding注释
height: 26px;
line-height: 26px;//居中显示
text-align: center;
border-bottom: 1px solid #eee;
padding: 0 1px; //这个地方非常神奇,当li:hover时需要在两边加一个border,因为300/5=60 ,如果我们写成60px的话会溢出来,写成58px后,我们用padding来填充这剩余的空间,当li:hover时再把padding 改为border
}
完成后的效果:
诶,两边怎么没有border呀,
哦,原来是我们浮动的ul的背景颜色挡住了原来div的border,那怎么才不让它挡呢?
用overflow:hidden;
为什么这个就行 呢?由于盒子模型,div真实的宽度是298px ,外面的border并不算是它的宽度,而overflow:hidden只消除div真实宽度之外的东西
完善后的代码:
.tab {
width: 298px;
height: 98px;
margin: 100px;
border: 1px solid #eee;
overflow: hidden;
position: relative;}
.tab ul {
height: 27px;
background-color: #E4E4E4;
position: absolute;
width: 300px;
left: -1px; }
.tab li {
float: left;
width: 58px;
height: 26px;
line-height: 26px;
text-align: center;
overflow: hidden;
background-color: #fff;
border-bottom: 1px solid #eee;
padding: 0 1px; }
效果图:
最后的hover代码:
.tab li:hover{
padding:0;//padding 换border
border-width:0 1px;
border-style:solid;
border-color: #eee;
border-bottom: 1px solid #fff;
}
如果你有更好的方法,欢迎留言…..