<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语言-go缺少的语言特性

      相信很多从其他语言转向go语言的人,或者是几乎所有初学go语言的人(我相信目前还没有学校将go作为教学语言,所以未来的IT工程师的第一语言都不会是go),都会在学习的过程中将go与自己的第一语言. ...

  2. proxy_banner

  3. Codeforces 1207 G. Indie Album

    Codeforces 1207 G. Indie Album 解题思路 离线下来用SAM或者AC自动机就是一个单点加子树求和,套个树状数组就好了,因为这个题广义SAM不能存在 \(len[u] = l ...

  4. 从Harbor仓库拉起镜像，创建容器并更新shell脚本

    注意: 此shell脚本仅供基本使用,还有好多待完善的地方 大致流程 使用Jenkins从Gogs拉取仓库代码,根据选择的参数和输入的标签,确定要编译打包jar的模块,以及要制作的docker镜像信息 ...

  5. 关于python、pip、anaconda安装的一些记录

    写这篇博客是因为自己这段时间总是倒腾python的环境,其间倒腾崩了好几次.....无奈之下还是梳理一下. PYTHON 首在安装python3.6的之后,我安装了anaconda3,这样我的电脑上p ...

  6. 额。。。c++ sort()排序问题

    首先呢 记得 这是个快排 不稳定 基本格式 头文件 #include<algorithm> #include<iostream> bool cmp(int x,int y) { ...

  7. wpf 把两个Bitmap 合并为一个

    水平合并 /// <summary> /// 将两个Bitmap水平合并为一个 /// </summary> /// <param name="first&qu ...

  8. 使用jQuery开发tab选项卡插件（可以右键关闭多个标签）

    在前一篇“使用jQuery开发tab选项卡插件”的基础上添加了tab标签右键关闭菜单功能,菜单主要包括:关闭当前标签.关闭左侧标签.关闭右侧标签.关闭其他.关闭全部. 一.插件效果 二.实现思路 为w ...

  9. React 中的 定义组件的 两种方式

    React 中创建 Components 的方式有两种:Function and Class 定义一个组件最简单的方法就是写一个 JavaScript 函数 function Welcome(prop ...

  10. Git和GitHub在线学习资源整理

    电子书 GotGitHub Git Workflow 沉浸式学习Git 文章 GitHub Fundamental visual-git-guide 图形化的Git参考手册 Linux下使用git命令 ...