<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. go ---fmt

    //main package main import ( "fmt" "os" ) type Data struct { } func (self Data) ...

  2. java之hibernate之双向的多对一关联映射

    这篇讲解 双向的多对一关联映射 1.表结构和多对一时,一致 2.类结构 Book.java public class Book implements Serializable{ private int ...

  3. Lua for - ipairs,pairs,# 遍历的运行时间

  4. JAVA基础之XML相关

    个人理解: 知晓XML与HTML的不同,知道其的自由性和约束的方式(规范)!数据按Schema约束写到XML里,然后通过dom4j解析出所有的元素,再用反射创建对象接着调出其所有的方法!!!特别要熟练 ...

  5. 整理：史上最简单的 MySQL 教程

    1 前言 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,它产生于距今六十多年前,随着信息技术和市场的发展,特别是二十世纪九十年代以后,数据管理不再仅仅是存储和管理数据,而转变成 ...

  6. SAP Marketing Cloud功能简述(四) : 线索和客户管理

    这个系列的前三篇文章Grace Dong已经给大家带来了下面的内容: SAP Marketing Cloud功能简述(一) : Contacts和Profiles SAP Marketing Clou ...

  7. Android笔记(六十二)网络框架volley

    什么是Volley 很多时候,我们的APP都需要用到网络技术,使用HTTP协议来发送接收数据,谷歌推出了一个网络框架——volley,该框架适合进行数据量不大,但通信频繁的网络操作. 它的优点: (1 ...

  8. Java重试机制

    重试作用: 对于重试是有场景限制的,不是什么场景都适合重试,比如参数校验不合法.写操作等(要考虑写是否幂等)都不适合重试. 远程调用超时.网络突然中断可以重试.在微服务治理框架中,通常都有自己的重试与 ...

  9. js HTTP 下载 处理 api 请求 返回数据流

    axios({ method: 'post', url: 'url....', data:{}, timeout: 1000*60, responseType: 'blob',// 此选项必须设置 否 ...

  10. SpringCloud_Eureka与Zookeeper对比

    关系型数据库与非关系型数据库及其特性: RDBMS(Relational Database Management System 关系型数据库) :mysql/oracle/sqlServer等   = ...