整理悬浮在列表中a元素时改变a元素上下边框颜色的问题。
整理一下当悬浮在a元素上时a的上下边颜色改变，并且里面的内容不会移动，下面是PSD图效果区域：
刚开始我先给A元素加了上下边框和颜色，利用a:hover改变a元素上下的边框颜色，但是第一个a元素的下边框和第二个a元素的上边框会并列成2px的线，整体效果上不那么美观：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul{
list-style: none;
}
ul li{
line-height: 32px;
}
ul a{
text-decoration: none;
display: block;
height: 32px;
width: 222px;
border-top: 1px solid red;
border-bottom: 1px solid red;
}
ul a:hover{
border-top: 1px solid blue;
border-bottom: 1px solid blue;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Services</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Services</a></li>
</ul>
</body>
</html>
显示的效果：
悬浮时内容不会移动，但是没有悬浮时边框粗细不同
然后是改进版，改进版的代码和效果如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul{
list-style: none;
}
ul li{
line-height: 32px;
}
ul a{
text-decoration: none;
display: block;
height: 32px;
width: 222px;
border-top: 1px solid red;
}
ul a:hover{
border-top: 1px solid blue;
border-bottom: 1px solid blue;
}
ul li:last-child a{
border-bottom: 1px solid red;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Services</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Services</a></li>
</ul>
</body>
</html>
悬浮时的效果：
在没有悬浮时达到PSD的效果，但是悬浮时出现文字往下跑的情况。由于只是给每个a元素添加了上边框，最后一个a元素给他单独设置了下边框，悬浮时a的上边框颜色变为蓝色，同时添加了一条蓝色的下边框，导致a的内容高度由33变为了34，后面的li整体往下面跑了1px,所以文字会移动。
最后使用绝对定位，悬浮在li上时给a增加两条边框，定位在没有悬浮时边框的Z轴上面，覆盖掉原来的颜色，达到了我想要的效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul{
list-style: none;
}
ul li{
width: 222px;
position: relative;
border-bottom: 1px solid red;
}
ul li:first-child{
border-top: 1px solid red;
}
ul a{
text-decoration: none;
display: block;
height: 32px;
line-height: 32px;
}
ul li:hover a::after{
position: absolute;
content: "";
width: 222px;
height: 1px;
border-bottom:1px solid blue;
left: 0;
bottom: -1px;
}
ul li:hover a::before{
position: absolute;
content: "";
width: 222px;
height: 1px;
border-top:1px solid blue;
left: 0;
top: -1px;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Services</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Services</a></li>
</ul>
</body>
</html>
效果如下：
解决问题的过程中又让我对伪类 ::after ::before有了新的认识. 他们作用是在元素前后分别增加内容，甚至可以是一条 长222px 高1px的红色线，给它相对于li绝对定位覆盖掉红色线条达到效果。
在写这个效果中又碰到问题：上面我是给每个li标签设置了1px的下边框，然后给第一个li标签单独设置了上边框，效果没问题。那么给每个li标签设置1px的上边框，然后给最后一个li标签设置1px的下边框是不是效果一样呢？：
ul{
list-style: none;
}
ul li{
width: 222px;
position: relative;
border-top: 1px solid red; /*这行代码改变了*/
}
ul li:last-child{ /*这行被改变*/
border-bottom: 1px solid red;
}
ul a{
text-decoration: none;
display: block;
height: 32px;
line-height: 32px;
}
ul li:hover a::after{
position: absolute;
content: "";
width: 222px;
height: 1px;
background-color: blue;
left: 0;
bottom: -1px;
}
ul li:hover a::before{
position: absolute;
content: "";
width: 222px;
height: 1px;
background-color: blue;
left: 0;
top: -1px;
}
效果如下：
出现了意想不到的效果，除了最后一个li标签悬浮时上下border被覆盖为蓝色外，其它li标签悬浮时出现了问题：下边框并没有覆盖原来的红色边框，而是被原来的红色边框给覆盖了，加入z-index后效果正常了：
ul li:hover a::after{
position: absolute;
content: "";
width: 222px;
height: 1px;
background-color: blue;
left: 0;
bottom: -1px;
z-index: 1; /*加入的代码*/
}
这种情况是为什么，我也不知道，明天去问老师，哈哈哈。。。。
整理悬浮在列表中a元素时改变a元素上下边框颜色的问题。的更多相关文章
- Android中Activity切换时共享视图元素的切换动画（5.0以上）
同一时候公布在我的博客 点此进入 背景 说来这个的背景很easy,常常在使用图片列表的时候就会想,假设"列表中的图片放大到整个屏幕"作为 Activity 的补间动画.就很完美了. ...
- Vue中在template标签中进行判断时注意比较元素
(一)比较的元素,一个是data元素,另外一个是常量,如下图所示: 编译正常,运行正常,效果在期望中,会显示Hello World,结果如下: (二)比较的元素,一个是data元素,另外一个是cons ...
- jquery中，使用append增加元素时，该元素的绑定监听事件失效
举例:如果在一个<div id="resultArea"></div>中,通过append添加一个id="checkOutTip"的文本 ...
- react列表中，当key改变后发生的事情
Main.jsx export default class Main extends PureComponent { constructor(props) { super(props); this.s ...
- 查询无序列表中第K小元素
当需要在无需列表中寻找第k小的元素时,一个显然的方法是将所有数据进行排序,然后检索k个元素.这种方法的运行时间为O(n log(n)). 无序列表调用分区函数将自身分解成两个子表,其长度为i和n-i. ...
- Python对列表中字典元素排序
问题起源 json对象a,b a = '{"ROAD": [{"id": 123}, {"name": "no1"}]} ...
- for循环删除列表中元素遇到的漏删的问题（python）
问题描述:python中通过for循环来删除列表中的两个相邻的元素,存在漏删的问题 比如说下面的例子,准备删掉2和3,但是结果是2删掉了,3没删掉 是因为把2删掉后3的下标就变成了1,但是原本下标为1 ...
- python如何删除二维或者三维数组/列表中某维的空元素
如题,个人在使用python进行数据预处理过程中出现的问题,抽象成删除三维列表中某维为空的问题. 一.首先来看一下三维数组/列表的结构 仔细看下图就会很清楚了: 轴0即是去除第一个外括号后第一层(我把 ...
- css选择器(常规选择器，伪类选择器，伪元素选择器，根元素选择器)
前言 CSS的一个核心特性是能向文档中的一组元素类型应用某些规则,本文将详细介绍CSS选择器 选择器 [通配选择器] 星号*代表通配选择器,可以与任何元素匹配 *{color: red;} [元素选择 ...
随机推荐
- 32位C#程序连接64位ORACLE数据库
VS2008 生成32位程序,安装在64位服务器上,调用System.data.oracleclient oracleConn = new OracleConnection(); ...
- 几个与JVM相关的JDK工具:jps, jstat, jmap
在项目中遇到OOM(Out of Memory)的问题,为了分析内存和JVM的垃圾回收器GC问题,一并把JVM相关的一些工具也研究了一下: jps:Java进程查看工具,实际上它和Unix/Linux ...
- Spring AOP 不同配置方式产生的冲突问题
Spring AOP的原理是 JDK 动态代理和CGLIB字节码增强技术,前者需要被代理类实现相应接口,也只有接口中的方法可以被JDK动态代理技术所处理:后者实际上是生成一个子类,来覆盖被代理类,那么 ...
- [DP题]放苹果
放苹果(DP做法) 描述 把M个同样的苹果放在N个同样的盘子里,允许有的盘子空着不放,问共有多少种不同的分法?(用K表示)5,1,1和1,5,1 是同一种分法.输入第一行是测试数据的数目t(0 < ...
- Linux新手入门：Unable to locate package错误解决办法
最近刚开始接触Linux,在虚拟机中装了个Ubuntu,当前的版本是Ubuntu 11.10,装好后自然少不了安装一些软件,在设置了软件的源后,就开始了 sudo apt-get install,结果 ...
- PAT 甲级 1008 Elevator (20)（20 分）模拟水题
题目翻译: 1008.电梯 在我们的城市里,最高的建筑物里只有一部电梯.有一份由N个正数组成的请求列表.这些数表示电梯将会以规定的顺序在哪些楼层停下.电梯升高一层需要6秒,下降一层需要4秒.每次停下电 ...
- pythonNET day05
孤儿进程 父进程先于子进程退出,此时子进程就会成为孤儿进程. 孤儿进程会被系统指定的进程收养,即系统进程会成为该孤儿进程新的父进程.孤儿进程退出时该父进程会处理退出状态 僵尸进程 子进程先于父进程退出 ...
- 转 linux 下装 usb driver
http://www.george-smart.co.uk/wiki/Xilinx_JTAG_Linux
- Python普通方法、静态方法、类方法
开始 # -*-coding:utf-8-*- # 普通方法,类方法,静态方法的区别 __metaclass__ = type class Tst: name = 'tst' data = 'this ...
- c#静态构造函数与构造函数
构造函数这个概念,在我们刚开始学习编程语言的时候,就被老师一遍一遍的教着.亲,现在你还记得静态构造函数的适用场景吗?如果没有,那么我们一起来复习一下吧. 静态构造函数是在构造函数方法前面添加了stat ...