<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）的更多相关文章

  1. jQuery实际案例⑥——图片跟随鼠标、五角星评分案例

    一.图片跟随鼠标移动 1.要求:鼠标移动到哪,图片就要跟到哪 2.用到的事件:首先监听鼠标:$(document).mousemove(function(event){ }); //此时可以获取鼠标距 ...

  2. CSS行内块元素(内联元素)

    一.典型代表 input img 二.特点: 在一行上显示 可以设置宽高 <style type="text/css"> img{ width: 300px; /* 顶 ...

  3. Python全栈开发之路 【第十七篇】：jQuery的位置属性、事件及案例

    位置属性 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  4. 24-[jQuery]-案例

    1.仿淘宝导航栏案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  5. 负margin使用权威指南

    自CSS2早在1998年,推荐表的使用已经慢慢褪色成背景和历史书中.正因为如此,CSS布局从那时起一直编码优雅的代名词. 的所有CSS概念设计师所使用,奖项可能需要给负margin的使用是最至少谈论的 ...

  6. 使用Pabot并行运行RF案例

    一.问题引入 在做接口自动化时随着案例增多,特别是流程类案例增多,特别是asp.net的webform类型的项目,再加上数据库校验也比较耗时,导致RF执行案例时间越来越长,就遇到这样一个问题,705个 ...

  7. ArcGIS案例学习1_2

    ArcGIS案例学习1_2 联系方式:谢老师,135_4855_4328, xiexiaokui#qq.com 时间:第一天下午 案例1:矢量提取,栅格提取和坐标系投影变换 目的:认识数据类型 教程: ...

  8. 层级 z-index 透明opacity

    在正常情况下,层级的大小由顺序决定,后面的元素要比前面的元素的层级要高 有定位元素的层级要比没有定位元素层级要高 在都有定位的情况下,层级还是取决于书写顺序 z-index 层级(仅能在定位元素上奏效 ...

  9. Quadro P5200 - 最强大的移动工作站显卡 专门为了惠普 VR Z 背包电脑而发布

    https://www.leiphone.com/news/201708/Z1MCetuoobEaHIqa.html 前言 在今年的计算机图形技术顶会 SIGGRAPH,英伟达并不是在单纯地展示自家的 ...

随机推荐

  1. iview 表格随着更改刷新

    使用location.reload() 或者是 路由的 this.$router.go(0) 进行刷新的时候,是会出现一阵的空白区域的,因为是整个页面的刷新 ,所以比较缓慢,因此使用了provide/ ...

  2. Debian 下忘记root密码的特殊修改方式

    当系统开机进入 grub页面时,在启动条目上按下键盘的 e 进入编辑 找到 linux 开头的一行,类似下面这样 linux /boot/vmlinux-4.9.0.8-amd64 root=/dev ...

  3. redis HyperLogLog的使用

    一.概念1.redis在2.8.9版本添加了HyperLogLog结构.2.redis HyperLogLog是用来做基数统计的算法,HyperLogLog的优点是:在输入元素的数量或者体积非常非常大 ...

  4. Spring AOP创建AroundAdvice实例

    AroundAdvice 1.在方法之前和之后来执行相应的操作 2.实现MethodInterceptor接口 接口文件: public interface IHello { public void ...

  5. 记录用到的mssql的几个方法

    1.RIGHT ( character_expression , integer_expression ) 返回字符串中从右边开始指定个数的字符 character_expression 字符或二进制 ...

  6. 使用requests简单的页面爬取

    首先安装requests库和准备User Agent 安装requests直接使用pip安装即可 pip install requests 准备User Agent,直接在百度搜索"UA查询 ...

  7. django-nginx与uwsgi项目部署

    uwsgi是提供动态服务的 nginx反向代理 在项目中创建一个settings.py的副本.我这里重命名为copy_settings.py,将配置文件中的DEBUG=False 修改项目下wsgi. ...

  8. iOS - xcode经常报的经典error解决办法大全

    1.错误信息: 2015-10-28 10:39:55.933 XFW[2696:55982] *** Assertion failure in -[UITableView _configureCel ...

  9. 【错误集】类ExcelExport是公共的, 应在名为 ExcelExport.java 的文件中声明

    检查类名是否相同 区分大小写,复制代码的时候会连类名也复制了,哈哈哈,总结一下

  10. [LeetCode] 581. 最短无序连续子数组 ☆

    描述 给定一个整数数组,你需要寻找一个连续的子数组,如果对这个子数组进行升序排序,那么整个数组都会变为升序排序. 你找到的子数组应是最短的,请输出它的长度. 示例 1: 输入: [2, 6, 4, 8 ...