整理悬浮在列表中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;} [元素选择 ...
随机推荐
- BinaryFormatter、SoapFormatter、XML3种序列化
序列化和反序列化我们可能经常会听到,其实通俗一点的解释,序列化就是把一个对象保存到一个文件或数据库字段中去,反序列化就是在适当的时候把这个文件再转化成原来的对象使用.我想最主要的作用有:1.在进程下次 ...
- 【monkeyrunner】浅谈包名和activity名
概念理解 包名:顾名思义,包名即为程序app的包名. activity名:每个界面都是一个activity. 两者关系:一个包有多个activity. Monkeyrunner中 device.sta ...
- HTML第三讲（选择符）
本次课程讲CSS中的选择符 1.基本选择符 基本选择符有三个 1.标记名选择符 所谓的标记名选择符就是直接在样式中使用标记名定义,譬如以下代码: (此种选择符的特点是所有相同的标记名可以同时定义不需要 ...
- mamp下安装ruby的mysql库
mysql2库死活不行,用ruby-mysql得了,纯ruby的库 gem "ruby-mysql" require 'mysql'
- (转)SQL SERVER 日志已满的处理方法
本文转载自:http://www.cnblogs.com/eycbest/archive/2012/01/04/2311567.html 事务日志文件Transaction Log File是用来记录 ...
- [Android] 开发第七天
在另一台机器上安装 Android-Studio ,结果卡在了 Gradle 的下载界面上,网上各种方案都试了一遍,最终解决办法是: 然后新建了一个 App ,创建了新的签名并上传到手机上,安装时直接 ...
- JavaScript(二)-精简
十三 DOM(文档对象模型) 1 作用 : 可访问javascript HTML文档的所有元素． 2 功能: (1) 改变html输出流 eg: <script> ...
- Web Api HelpPage
为了方面APP开发人员,服务端的接口都应当提供详尽的API说明.但每次有修改,既要维护代码,又要维护文档,一旦开发进度紧张,很容易导致代码与文档不一致. Web API有一个Help Page插件,可 ...
- 如何制作简单的 3D 打印模型
Hi 大家好! 了解一个方兴未艾,但极为有趣的话题 — 3D 打印 . 为了帮助大家对3D打印有一个初步的感性认识,我在线制作了一款可用于3D打印的model, 大家可以先通过体验这个在线 model ...
- 精《Linux内核精髓：精通Linux内核必会的75个绝技》一HACK #4 如何使用Git
HACK #4 如何使用Git 本节介绍Git的使用方法.Git是Linux内核等众多OSS(Open Source Software,开源软件)开发中所使用的SCM(Source Code Mana ...