整理悬浮在列表中a元素时改变a元素上下边框颜色的问题。
2016-11-07 19:56
531 查看
整理一下当悬浮在a元素上时a的上下边颜色改变,并且里面的内容不会移动,下面是PSD图效果区域:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/94908e73de7b8b96ff83cb7e9be7bce9.png)
刚开始我先给A元素加了上下边框和颜色,利用a:hover改变a元素上下的边框颜色,但是第一个a元素的下边框和第二个a元素的上边框会并列成2px的线,整体效果上不那么美观:
显示的效果:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/df9d52c7f5d7b22c10ec25fe275b67a9.gif)
悬浮时内容不会移动,但是没有悬浮时边框粗细不同
然后是改进版,改进版的代码和效果如下:
悬浮时的效果:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/6194e8cd43342fc5814a4d5df1f6db04.gif)
在没有悬浮时达到PSD的效果,但是悬浮时出现文字往下跑的情况。由于只是给每个a元素添加了上边框,最后一个a元素给他单独设置了下边框,悬浮时a的上边框颜色变为蓝色,同时添加了一条蓝色的下边框,导致a的内容高度由33变为了34,后面的li整体往下面跑了1px,所以文字会移动。
最后使用绝对定位,悬浮在li上时给a增加两条边框,定位在没有悬浮时边框的Z轴上面,覆盖掉原来的颜色,达到了我想要的效果:
效果如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/ddbeeb2e42392526ce51006ed3a02452.gif)
解决问题的过程中又让我对伪类 ::after ::before有了新的认识. 他们作用是在元素前后分别增加内容,甚至可以是一条 长222px 高1px的红色线,给它相对于li绝对定位覆盖掉红色线条达到效果。
在写这个效果中又碰到问题:上面我是给每个li标签设置了1px的下边框,然后给第一个li标签单独设置了上边框,效果没问题。那么给每个li标签设置1px的上边框,然后给最后一个li标签设置1px的下边框是不是效果一样呢?:
效果如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/19a01842980e810d34514c1009f15d66.gif)
出现了意想不到的效果,除了最后一个li标签悬浮时上下border被覆盖为蓝色外,其它li标签悬浮时出现了问题:下边框并没有覆盖原来的红色边框,而是被原来的红色边框给覆盖了,加入z-index后效果正常了:
这种情况是为什么,我也不知道,明天去问老师,哈哈哈。。。。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/94908e73de7b8b96ff83cb7e9be7bce9.png)
刚开始我先给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>
显示的效果:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/df9d52c7f5d7b22c10ec25fe275b67a9.gif)
悬浮时内容不会移动,但是没有悬浮时边框粗细不同
然后是改进版,改进版的代码和效果如下:
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>
悬浮时的效果:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/6194e8cd43342fc5814a4d5df1f6db04.gif)
在没有悬浮时达到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>
效果如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/ddbeeb2e42392526ce51006ed3a02452.gif)
解决问题的过程中又让我对伪类 ::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 }
效果如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201611/19a01842980e810d34514c1009f15d66.gif)
出现了意想不到的效果,除了最后一个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 }
这种情况是为什么,我也不知道,明天去问老师,哈哈哈。。。。
相关文章推荐
- 火狐边框颜色不能改变 问题解决
- 鼠标悬浮在输入框上时改变边框颜色或背景色
- C++ builder 如何改变EDIT等的边框颜色?
- JavaScript Select和Option列表元素上下左右移动
- 改变webpart部件区域的边框颜色
- table动态改变颜色包括一个边框
- JavaScript Select和Option列表元素上下左右移动
- 一条语句改变进度条颜色及去掉进度条边框
- UITableView 改变边框颜色
- 在VC中 改变List列表中一行的颜色
- 一条语句改变进度条颜色及去掉进度条边框
- 最简短语句改变进度条颜色及去掉进度条边框
- [原创]table动态改变颜色包括一个边框
- [Struts2]s:combobox标签在使用出现问题:改变下拉列表的选中值,文本框的值不能随着被改变
- vc改变进度条颜色及去掉进度条边框
- Flex中如何改变TextInput输入框得到焦点时边框颜色的例子
- 点键盘“上下”按钮时得到行的焦点,同时改变颜色背景色
- 改变控件颜色问题
- [原创]table动态改变颜色包括一个边框
- STL中队列QUEUE中元素改变大小(resize)可能出现的问题!