整理悬浮在列表中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;} [元素选择 ...
随机推荐
- LeetCode OJ - Best Time to Buy and Sell Stock
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/xiezhihua120/article/details/32939749 Say you have ...
- solr5.5.0在CenOS上的安装与配置
solr5.5.0在CenOS上的安装与配置 1. Solr简介 Solr是一个基于Lucene的Java搜索引擎服务器.Solr 提供了层面搜索.命中醒目显示并且支持多种输出格式(包括 XML/XS ...
- myeclipse越来越卡了怎么回事啊？
去掉拼写检查:windows->preferences->General->Editors->Text Editors->Spelling 将“Enable spell ...
- postgresql PL/pgSQL—存储过程结构和变量声明
ref: https://www.postgresql.org/docs/9.6/static/plpgsql-structure.html 一. 函数结构 CREATE FUNCTION somef ...
- vue 整合雪碧图功能
1.通过命令新建一个vue项目 环境要求: 安装有 Node.js. vue. vue-cli . 创建项目: vue init webpack tx_demo cd tx_demo 进入项目,下载依 ...
- pgsql的同步须知
pgsql的同步模式是根据master上的日志来做的同步,有两种同步方式,参考http://www.chinaxing.org/articles/Postgres/2012/12/14/2012-12 ...
- emacs之配置2，UI基本设置
在-下建立目录emacsConfig,里面建立一些自己写的el脚本,下面是名字随便,我的 emacsConfig/ui-setting.el ;关闭Emacs的默认启动界面 (setq inhibit ...
- java基础-Map的静态初始化以及Map的遍历等.....................
1.map的静态初始化,以及map遍历的几种方法: package com.cy.test; import java.util.HashMap; import java.util.Iterator; ...
- [转]Aspose.Words.dll 将 Word 转换成 html
用于网站上,上传 Word 文档后显示文档内容(可看作在线阅读).代码适用于 .net 2.0 或以上版本 (使用的未注册 Aspose.Words.dll 并尝试消除试用标志) 下载地址 strin ...
- [html]window.open 使用示例
<!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...