鼠标经过提高层级案例（margin，相对定位，z-index）
<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）的更多相关文章
- jQuery实际案例⑥——图片跟随鼠标、五角星评分案例
一.图片跟随鼠标移动 1.要求:鼠标移动到哪,图片就要跟到哪 2.用到的事件:首先监听鼠标:$(document).mousemove(function(event){ }); //此时可以获取鼠标距 ...
- CSS行内块元素(内联元素)
一.典型代表 input img 二.特点: 在一行上显示 可以设置宽高 <style type="text/css"> img{ width: 300px; /* 顶 ...
- Python全栈开发之路 【第十七篇】：jQuery的位置属性、事件及案例
位置属性 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
- 24-[jQuery]-案例
1.仿淘宝导航栏案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- 负margin使用权威指南
自CSS2早在1998年,推荐表的使用已经慢慢褪色成背景和历史书中.正因为如此,CSS布局从那时起一直编码优雅的代名词. 的所有CSS概念设计师所使用,奖项可能需要给负margin的使用是最至少谈论的 ...
- 使用Pabot并行运行RF案例
一.问题引入 在做接口自动化时随着案例增多,特别是流程类案例增多,特别是asp.net的webform类型的项目,再加上数据库校验也比较耗时,导致RF执行案例时间越来越长,就遇到这样一个问题,705个 ...
- ArcGIS案例学习1_2
ArcGIS案例学习1_2 联系方式:谢老师,135_4855_4328, xiexiaokui#qq.com 时间:第一天下午 案例1:矢量提取,栅格提取和坐标系投影变换 目的:认识数据类型 教程: ...
- 层级 z-index 透明opacity
在正常情况下,层级的大小由顺序决定,后面的元素要比前面的元素的层级要高 有定位元素的层级要比没有定位元素层级要高 在都有定位的情况下,层级还是取决于书写顺序 z-index 层级(仅能在定位元素上奏效 ...
- Quadro P5200 - 最强大的移动工作站显卡 专门为了惠普 VR Z 背包电脑而发布
https://www.leiphone.com/news/201708/Z1MCetuoobEaHIqa.html 前言 在今年的计算机图形技术顶会 SIGGRAPH,英伟达并不是在单纯地展示自家的 ...
随机推荐
- 记录一次mysql宕机的解决办法
首先先粘贴出来我的错误信息,如下: 2019-07-16T00:53:18.285919Z 0 [System] [MY-010116] [Server] /usr/sbin/mysqld (mysq ...
- tkinter学习笔记_05
10.菜单 menuber import tkinter as tk root = tk.Tk() root.title("xxx") root.geometry('200x100 ...
- UOJ269 清华集训2016 如何优雅地求和 下降幂多项式、NTT
代码 神仙题? 看到连续的点值,那么一定是要利用到连续点值的性质,可以考虑下降幂多项式,即考虑多项式\(F(x) = \sum\limits_{i=0}^m a_ix^{\underline i}\) ...
- 深度学习Tensorflow相关书籍推荐和PDF下载
深度学习Tensorflow相关书籍推荐和PDF下载 baihualinxin关注 32018.03.28 10:46:16字数 481阅读 22,673 1.机器学习入门经典<统计学习方法&g ...
- twbsPagination.js分页插件
分页插件在使用时注意,如果页面中存在其他异步加载的数据,在运行分页方法第一次后,页面上的分页样式与分页中的data数据就是第一次的数据,如果异步加载重新在页面上录入数据,并希望分页继续在新的数据上实现 ...
- extend Thread 和 implements Runnable
原文地址:extend Thread 和 implements Runnable 一个Thread的实例只能产生一个线程 or: 同一实例(Runnable实例)的多个线程 look: public ...
- nginx 高并发配置参数
一.一般来说nginx 配置文件中对优化比较有作用的为以下几项: 1. worker_processes 8; nginx 进程数,建议按照cpu 数目来指定,一般为它的倍数 (如,2个四核的cpu ...
- Ubuntu 用户权限相关命令
目标 用户 和 权限 的基本概念 用户管理 终端命令 组管理 终端命令 修改权限 终端命令 01. 用户 和 权限 的基本概念 1.1 基本概念 用户 是 Linux 系统工作中重要的一环,用户管理包 ...
- Linux环境变量$PATH
3. 使用env命令显示所有的环境变量 # env HOSTNAME=redbooks.safe.org PVM_RSH=/usr/bin/rsh Shell=/bin/bash TERM=xterm ...
- 时间模块time和datetime的使用
日期和时间 一 time模块 import time 时间的表示形式: 时间戳 时间戳是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现 ...