<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. JVM运行参数优化详细教程

    获取设置的参数str的值:  常用的-X参数有以下这些: 手动调用GC执行垃圾回收操作:(-XX:+DisableExplicitGC 手动调用将会失效) 查看tomcat的进程ID: 或者:

  2. Dubbo学习摘录（一）

    Dubbo基于自定义配置,实现自己的Bean. 通常,完成一个自定义配置需要以下步骤: 设计配置属性和JavaBean: 编写XSD文件: 编写NamespaceHandler和BeanDefinit ...

  3. emacs手动安装、解决不能使用中文输入法

    emacs的安装 emacs的下载,解压 wget http://mirrors.ustc.edu.cn/gnu/emacs/emacs-25.3.tar.gz tar -zxf emacs-25.3 ...

  4. 5_PHP数组_3_数组处理函数及其应用_1_快速创建数组的函数

    以下为学习孔祥盛主编的<PHP编程基础与实例教程>(第二版)所做的笔记. 一.快速创建数组的函数 1. range() 函数 程序: <?php $numbers = range(1 ...

  5. 平衡二叉树详解——PHP代码实现

    一.什么是平衡二叉树 平衡二叉树(Self-Balancing Binary Search Tree 或者 Height-Balancing Binary Search Tree)译为 自平衡的二叉查 ...

  6. 微信小程序零基础制作指南

    第一步 准备工作 下载腾讯官方的微信web开发工具并且安装 第二步 登录已经注册小程序的微信账号并且选择合适的路径新建小程序项目. 新建一个页面文件夹,每一个页面需要一个文件夹,里面包括写逻辑脚本的j ...

  7. MySql 严格模式相关配置

    目录 MySql 严格模式 MySQL的sql_mode合理设置 sql model 常用来解决下面几类问题 sql_mode常用值 注意 改为严格模式后可能会存在的问题 模式设置和修改(以解决上述问 ...

  8. 分布式系统session一致性解决方案

    在单机系统中,不存在Session共享问题,但是在分布式系统中,我们必须实现session共享机制,使得多台应用服务器之间会话统一,如果不进行Session共享会出现数据不一致,比如:会导致请求落到不 ...

  9. 【亲测有效】安装npm慢的解决方案

    使用淘宝的NPM库:npm install -gd express --registry=http://registry.npm.taobao.org

  10. golang读写文件的几种方式

    golang中处理文件有很多种方式,下面我们来看看. (1)使用os模块 先来看看如何查看文件属性 package main import ( "fmt" "os&quo ...