整理悬浮在列表中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;} [元素选择 ...
随机推荐
- 远程连接Linux虚拟机上的mysql失败的解决方法
今天在虚拟机Ubuntu上折腾了一晚上mysql,然后试着用java连接,搞了很久都没成功,但是同学配好的Debian上却连接成功了,也就是说我的配置有问题. 折腾了很久,最后还是通过理解异常信息来大 ...
- Android中Parcelable与Serializable接口用法
转自: Android中Parcelable接口用法 1. Parcelable接口 Interface for classes whose instances can be written to a ...
- win7 安装 node-sass报错
由于国内网络问题,所以会导致下载node-sass二进制包失败 只需要在 ~/.npmrc(当前用户家目录下)添加下面一行: sass_binary_site=https://npm.taobao.o ...
- (转)为C# Windows服务添加安装程序
本文转载自:http://kamiff.iteye.com/blog/507129 最近一直在搞Windows服务,也有了不少经验,感觉权限方面确定比一般程序要受限很多,但方便性也很多.像后台运行不阻 ...
- java批量下载，将多文件打包成zip格式下载
现在的需求的: 根据产品族.产品类型,下载该产品族.产品类型下面的pic包: pic包是zip压缩文件: t_product表: 这些包以blob形式存在另一张表中: t_imagefile表: 现在 ...
- Bootstrap-CL：警告
ylbtech-Bootstrap-CL:警告 1.返回顶部 1. Bootstrap 警告(Alerts) 本章将讲解警告(Alerts)以及 Bootstrap 所提供的用于警告的 class.警 ...
- [saiku] 通过管理台配置用户、schema和数据源
上一篇讲到了如何下载和安装saiku [http://www.cnblogs.com/avivaye/p/4877680.html] 本文简介下saiku用户的配置操作和需要注意的点 一.添加用户 S ...
- SCN与数据恢复的关系
Oracle内部主要存在以下四种SCN 1.系统检查点(system checkpoint)SCN 每当一个检查点完成时,Oracle就把该检查点对应的SCN记录到控制文件中,可以用以下语句查看当前数 ...
- 磁盘IO计算
看了篇文章,突然想写点磁盘IO的东西,也算是对磁盘的一点点总结. 以下以理论为主,辅助结合实际情况.不明白这句话的出去. 今年是2018年,目前市场上早已经没有国产的硬盘,以前的长城.易拓早早的被拍死 ...
- java普通类、抽象类、接口、面向对象理解
1.面向对象编程: 面向对象编程的语言不止java一种,还有: simula 67(第一个面向对象语言,支持单继承和一定含义的多态和部分动态绑定): Smalltalk(第一个支持动态类型的语言,支持 ...