鼠标经过提高层级案例（margin，相对定位，z-index）
<body>
<ul>
<li class="box1">1</li>
<li class="box2">2</li>
<li class="box3">3</li>
<li class="box4">4</li>
</ul>
</body>
<style>
ul {
height: 400px;
width: 808px;
margin: 0 auto;
}
li {
width: 200px;
height: 400px;
border: 1px solid #000;
float: left;
list-style: none;
}
</style>
这样写完之后，会发现中间边框明显更粗，因为是两个盒子的边框并在一起。
解决方法是设置负的margin值
.box2, .box3, .box4 {
margin-left: -1px;/*边框变成细线*/
}
然后我们设置鼠标经过盒子的样式，会发现，有盒子边框有一边不会变色
解决方法是：使用相对定位可以解决，如果li本身就具有定位，这时候可以使用z-index提高层级
li:hover {
border: 1px solid rgb(52, 9, 209);/*鼠标经过前面三个盒子边框有一边不会变色*/
position: relative;/*使用相对定位可以解决*/
/* z-index: 1;如果li本身就具有定位，这时候可以使用z-index提高层级 */
}
鼠标经过提高层级案例（margin，相对定位，z-index）的更多相关文章
- jQuery实际案例⑥——图片跟随鼠标、五角星评分案例
一.图片跟随鼠标移动 1.要求:鼠标移动到哪,图片就要跟到哪 2.用到的事件:首先监听鼠标:$(document).mousemove(function(event){ }); //此时可以获取鼠标距 ...
- CSS行内块元素(内联元素)
一.典型代表 input img 二.特点: 在一行上显示 可以设置宽高 <style type="text/css"> img{ width: 300px; /* 顶 ...
- Python全栈开发之路 【第十七篇】：jQuery的位置属性、事件及案例
位置属性 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
- 24-[jQuery]-案例
1.仿淘宝导航栏案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- 负margin使用权威指南
自CSS2早在1998年,推荐表的使用已经慢慢褪色成背景和历史书中.正因为如此,CSS布局从那时起一直编码优雅的代名词. 的所有CSS概念设计师所使用,奖项可能需要给负margin的使用是最至少谈论的 ...
- 使用Pabot并行运行RF案例
一.问题引入 在做接口自动化时随着案例增多,特别是流程类案例增多,特别是asp.net的webform类型的项目,再加上数据库校验也比较耗时,导致RF执行案例时间越来越长,就遇到这样一个问题,705个 ...
- ArcGIS案例学习1_2
ArcGIS案例学习1_2 联系方式:谢老师,135_4855_4328, xiexiaokui#qq.com 时间:第一天下午 案例1:矢量提取,栅格提取和坐标系投影变换 目的:认识数据类型 教程: ...
- 层级 z-index 透明opacity
在正常情况下,层级的大小由顺序决定,后面的元素要比前面的元素的层级要高 有定位元素的层级要比没有定位元素层级要高 在都有定位的情况下,层级还是取决于书写顺序 z-index 层级(仅能在定位元素上奏效 ...
- Quadro P5200 - 最强大的移动工作站显卡 专门为了惠普 VR Z 背包电脑而发布
https://www.leiphone.com/news/201708/Z1MCetuoobEaHIqa.html 前言 在今年的计算机图形技术顶会 SIGGRAPH,英伟达并不是在单纯地展示自家的 ...
随机推荐
- PXC安装部署
安装依赖与注意事项: 1. rpm -ivh http://dl.fedoraproject.org/pub/epel/6/x86_64/epel-release-6-8.noarch.rpm 1 ...
- spring源码解析前瞻
很多人有疑问:为什么要读源码?读源码有什么用?我也一直问自己这些问题,读源码非常枯燥,工作中又用不到,慢慢的自己读源码越发现自己知识的不足,无法把知识串起来,形成知识体系.从单系统中常用的Spring ...
- [LOJ #2833]「JOISC 2018 Day 1」帐篷
题目大意:有一个$n\times m$的网格图,若一个人的同一行或同一列有人,他就必须面向那个人,若都无人,就可以任意一个方向.若一个人无法确定方向,则方案不合法,问不同的方案数.$n,m\leqsl ...
- Self-paced Clustering Ensemble自步聚类集成论文笔记
Self-paced Clustering Ensemble自步聚类集成论文笔记 2019-06-23 22:20:40 zpainter 阅读数 174 收藏 更多 分类专栏: 论文 版权声明 ...
- docker第一章--介绍和安装
- iOS - app 进行安全加固
研究了大半年逆向工程了,没在博客做记录,最近看到篇,跟自己的想法不谋而合,摘要下: 运行在越狱设备上的 iOS app,非常容易遭到破解分析,这里我列举一些可以加大破解难度的方法,希望有所帮助. 一些 ...
- Eclipse - servlet显示无法导入javax.servlet包问题的解决方案
项目名-->右键 Property-->选择 Java Build Path-->选择 Add External JARs-->选择 把servlet-api.jar的路径输入 ...
- 整理：史上最简单的 MySQL 教程
1 前言 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,它产生于距今六十多年前,随着信息技术和市场的发展,特别是二十世纪九十年代以后,数据管理不再仅仅是存储和管理数据,而转变成 ...
- Python——Int&Bool
整数类型: int类型,多用于数字运算 print(666) print(6+1) 整数类型转换: v1 = 666 v2 = str(v1) #会得出字符串的666 v1 = True v2 = i ...
- 虚拟机搭建IKUAI软路由
1.登录爱快软路由的官网下载镜像(支持ISO ,GHO),这里采用iso安装 2.选择好后开机(选择数字编号1,回车) 3.输入“y”回车,程序自动安装 4.安装成功后如图 5.设置IP 6.绑定网卡 ...