整理悬浮在列表中a元素时改变a元素上下边框颜色的问题。
整理一下当悬浮在a元素上时a的上下边颜色改变，并且里面的内容不会移动，下面是PSD图效果区域：
刚开始我先给A元素加了上下边框和颜色，利用a:hover改变a元素上下的边框颜色，但是第一个a元素的下边框和第二个a元素的上边框会并列成2px的线，整体效果上不那么美观：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 ul{ 8 list-style: none; 9 } 10 ul li{ 11 line-height: 32px; 12 } 13 ul a{ 14 text-decoration: none; 15 display: block; 16 height: 32px; 17 width: 222px; 18 border-top: 1px solid red; 19 border-bottom: 1px solid red; 20 } 21 ul a:hover{ 22 border-top: 1px solid blue; 23 border-bottom: 1px solid blue; 24 } 25 </style> 26 </head> 27 <body> 28 <ul> 29 <li><a href="#">Services</a></li> 30 <li><a href="#">Services</a></li> 31 <li><a href="#">Services</a></li> 32 <li><a href="#">Services</a></li> 33 <li><a href="#">Services</a></li> 34 <li><a href="#">Services</a></li> 35 <li><a href="#">Services</a></li> 36 <li><a href="#">Services</a></li> 37 <li><a href="#">Services</a></li> 38 </ul> 39 </body> 40 </html>
显示的效果：
悬浮时内容不会移动，但是没有悬浮时边框粗细不同
然后是改进版，改进版的代码和效果如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 ul{ 8 list-style: none; 9 } 10 ul li{ 11 line-height: 32px; 12 } 13 ul a{ 14 text-decoration: none; 15 display: block; 16 height: 32px; 17 width: 222px; 18 border-top: 1px solid red; 19 } 20 ul a:hover{ 21 border-top: 1px solid blue; 22 border-bottom: 1px solid blue; 23 } 24 ul li:last-child a{ 25 border-bottom: 1px solid red; 26 } 27 </style> 28 </head> 29 <body> 30 <ul> 31 <li><a href="#">Services</a></li> 32 <li><a href="#">Services</a></li> 33 <li><a href="#">Services</a></li> 34 <li><a href="#">Services</a></li> 35 <li><a href="#">Services</a></li> 36 <li><a href="#">Services</a></li> 37 <li><a href="#">Services</a></li> 38 <li><a href="#">Services</a></li> 39 <li><a href="#">Services</a></li> 40 </ul> 41 </body> 42 </html>
悬浮时的效果：
在没有悬浮时达到PSD的效果，但是悬浮时出现文字往下跑的情况。由于只是给每个a元素添加了上边框，最后一个a元素给他单独设置了下边框，悬浮时a的上边框颜色变为蓝色，同时添加了一条蓝色的下边框，导致a的内容高度由33变为了34，后面的li整体往下面跑了1px,所以文字会移动。
最后使用绝对定位，悬浮在li上时给a增加两条边框，定位在没有悬浮时边框的Z轴上面，覆盖掉原来的颜色，达到了我想要的效果：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 ul{ 8 list-style: none; 9 } 10 ul li{ 11 width: 222px; 12 position: relative; 13 border-bottom: 1px solid red; 14 } 15 ul li:first-child{ 16 border-top: 1px solid red; 17 } 18 ul a{ 19 text-decoration: none; 20 display: block; 21 height: 32px; 22 line-height: 32px; 23 } 24 ul li:hover a::after{ 25 position: absolute; 26 content: ""; 27 width: 222px; 28 height: 1px; 29 border-bottom:1px solid blue; 30 left: 0; 31 bottom: -1px; 32 } 33 ul li:hover a::before{ 34 position: absolute; 35 content: ""; 36 width: 222px; 37 height: 1px; 38 border-top:1px solid blue; 39 left: 0; 40 top: -1px; 41 } 42 </style> 43 </head> 44 <body> 45 <ul> 46 <li><a href="#">Services</a></li> 47 <li><a href="#">Services</a></li> 48 <li><a href="#">Services</a></li> 49 <li><a href="#">Services</a></li> 50 <li><a href="#">Services</a></li> 51 <li><a href="#">Services</a></li> 52 <li><a href="#">Services</a></li> 53 <li><a href="#">Services</a></li> 54 <li><a href="#">Services</a></li> 55 </ul> 56 </body> 57 </html>
效果如下：
解决问题的过程中又让我对伪类 ::after ::before有了新的认识. 他们作用是在元素前后分别增加内容，甚至可以是一条 长222px 高1px的红色线，给它相对于li绝对定位覆盖掉红色线条达到效果。
在写这个效果中又碰到问题：上面我是给每个li标签设置了1px的下边框，然后给第一个li标签单独设置了上边框，效果没问题。那么给每个li标签设置1px的上边框，然后给最后一个li标签设置1px的下边框是不是效果一样呢？：
1 ul{ 2 list-style: none; 3 } 4 ul li{ 5 width: 222px; 6 position: relative; 7 border-top: 1px solid red; /*这行代码改变了*/ 8 } 9 ul li:last-child{ /*这行被改变*/ 10 border-bottom: 1px solid red; 11 } 12 ul a{ 13 text-decoration: none; 14 display: block; 15 height: 32px; 16 line-height: 32px; 17 } 18 ul li:hover a::after{ 19 position: absolute; 20 content: ""; 21 width: 222px; 22 height: 1px; 23 background-color: blue; 24 left: 0; 25 bottom: -1px; 26 } 27 ul li:hover a::before{ 28 position: absolute; 29 content: ""; 30 width: 222px; 31 height: 1px; 32 background-color: blue; 33 left: 0; 34 top: -1px; 35 }
效果如下：
出现了意想不到的效果，除了最后一个li标签悬浮时上下border被覆盖为蓝色外，其它li标签悬浮时出现了问题：下边框并没有覆盖原来的红色边框，而是被原来的红色边框给覆盖了，加入z-index后效果正常了：
1 ul li:hover a::after{ 2 position: absolute; 3 content: ""; 4 width: 222px; 5 height: 1px; 6 background-color: blue; 7 left: 0; 8 bottom: -1px; 9 z-index: 1; /*加入的代码*/ 10 }
这种情况是为什么，我也不知道，明天去问老师，哈哈哈。。。。
