<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. Ubuntu下载搜狗输入法

    实在...因为百度上写的就很好了,所以这里就直接“链”了.. https://jingyan.baidu.com/article/2d5afd6933a67b85a2e28e9f.html

  2. 一步一步手写GIS开源项目-（1）500行代码实现基础GIS展示功能

    1.开篇 大学毕业工作已经两年了,上学那会就很想研读一份开源GIS的源码,苦于自己知识和理解有限,而市面上也没有什么由浅入深讲解开源gis原理的书籍,大多都是开源项目简介以及项目的简单应用.对于初级程 ...

  3. 【ABAP】第一章-基础

    1. ABAP语法基础 1.1 基本数据类型 C.N.D.T.I.F.P.X.string.Xstring P:默认为8字节,最大允许16字节.最大整数位:16*2 = 32 - 1 = 31 -14 ...

  4. Oracle——无法在查询中执行 DML 操作

    今天在调用Oracle Function遇到一个异常

  5. java之struts2之文件下载

    1.在实际应用开发中,文件下载功能也非常常见. 2.最简单的文件下载方式是通过超链接来进行文件下载: <body> <a href="download/s.txt" ...

  6. 实时监听 JavaScript改变 input 值 input输入框内容 value 变化实时监听

    思路:通过setInterval()方法去定时对比新旧值 当时候JavaScript的onchange 和onpropertychange(注意ie版本) 监听输入框input时间,人为改变值是可以触 ...

  7. sql group by hour 按小时分组统计

    Time字段以小时分组统计 select datepart(hour,time) hour,count(1) count from table where Similarity<75 group ...

  8. 动画处理<并行和串行>

    并行动画 当多个动画定义同时指向某个组件,并使用动画控制器启动时,就产生了并行动画(Parallel Animation).例如我们可以让一个组件: 移动的同时改变大小 旋转的同时边界颜色闪烁 圆形图 ...

  9. 二叉树&满二叉树与完全二叉树

    二叉树的定义 二叉树(Binary Tree)是n(n≥0)个元素的有限集合,该集合为空或者为由一个称为"根"的元素及两个不相交的.被分别称为左子树和右子树的二叉树组成 二叉树的基 ...

  10. python使用tkinter无法获取输入框的值

    如果遇到:使用tkinter无法获取输入框Entty()的值的问题,需要检查一下,是否在定义Entry()时立即进行了pack() 会出现使用entryname.get()报错 解决方法:把定义和pa ...