需要注意的是  hover中要给盒子加:position:relative;

<style type="text/css">
*{margin:0;padding:0;}
.boxin{width:150px;height:300px;border:1px solid #ccc;float: left;margin-left:-1px;}

.boxin:hover{border:1px solid #f40; position: relative;}
</style>
</head>
<body>
<div id="box">
<div class="boxin"></div>
<div class="boxin"></div>
<div class="boxin"></div>
<div class="boxin"></div>
<div class="boxin"></div>
<div class="boxin"></div>
</div>
</body>

提醒：如果.boxin的父类是个定位，那么需要设置.boxin:hover的层级--------z-index:1(设置当前的层级比其他要高)

css版hover现边框的更多相关文章

  1. css中hover设置边框后div中内容后移解决方法

    <style> .demo{width:1200px;height:400px;background:#fff;} .demo:hover{border:1px solid #cecece ...

  2. .使用 HTML+CSS 实现如图布局，border-widht 5px，一个格子大小是 50*50，hover时候边框变为红色（兼容IE6+，考虑语义化的结构）

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  3. 纯css竟可以做出边框这样长宽度的过渡效果

    边框效果如下:鼠标移到下面方形,就有效果   要是没有效果,点这个:https://murenziwei.github.io/testGit/Untitled1.html 正如你所看到的,这边框颜色只 ...

  4. CSS实现列表li边框重合问题

    CSS实现列表li边框重合问题 2017年04月13日 21:04:18 阅读数:5066 在我们写东西的时候经常要用到ul,但是也经常会出现li边框重合的问题,如下图:  可以看到每个格子的右边框和 ...

  5. 多行图片hover加边框兼容IE7+

    问题: 遇到多行多列排列的图片时,hover上去加边框会把下面的图片挤到别处 ============================================================ ...

  6. jQuery的hover方法搭配css的hover选择器，实现选中元素突出显示

    问题简述: 今天做帮一个师姐做网页遇到一个这样的要求: 鼠标不移动进表格,表格透明度不变. 鼠标移动进表格,hover到的单元格透明度不变,没hover到的单元格透明度改变. 先贴我已经实现好的效果, ...

  7. 响应式移动端去除css的hover和jq的hover还有input在苹果下的默认样式

    去除css的hover: /*直接给body添加ontouchstart*/ <body ontouchstart> 去除jq的hover: var winW01 = $(window). ...

  8. 经典的 div + css 鼠标 hover 下拉菜单

    经典的 div + css 鼠标 hover 下拉菜单 效果图: 源码: <html> <head> <meta charset="utf-8"> ...

  9. CSS 关于文本 背景 边框整理

    文本与字体 1)阴影:text-shadow 格式:text-shadow:5px 5px 3px #FFFFFF分别对应 水平方向 垂直方向 模糊程度 颜色值 代码: <!DOCTYPE ht ...

随机推荐

  1. 括号匹配算法 C语言实现

    #include <stdio.h> #include <malloc.h> //malloc,realloc #include <math.h> //含有over ...

  2. KPI考核

    编辑 本词条缺少名片图,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧! KPI考核,Key Performance Indicator的缩写,指的是关键绩效指标考核法. 中文名 KPI考核 外 ...

  3. J2SE知识点摘记(十九)

    Collection 1.2.1         常用方法 Collection 接口用于表示任何对象或元素组.想要尽可能以常规方式处理一组元素时,就使用这一接口.Collection 在前面的大图也 ...

  4. Form Presonalization 表单个性化定义控制应用

    1.1.1   表单个性化定义 Oracle EBS 11.5.10所增加的Form Presonalization功能,是在对Form不进行开发的前提下,用一些系统内置的触发器,按照所设定的控制规则 ...

  5. 压缩OLEVARIANT数据

    TCLIENTDATASET.DATA, TCLIENTDATASET.DELTA, TDATASETPROVIDER.DATA,它们的DATA属性的类型都是OLEVARIANT. 中间层和客户端之间 ...

  6. XDocument读取xml的所有元素以及XPath语法

    原文  http://www.cnblogs.com/xxyishutong/p/3326375.html <?xml version="1.0" encoding=&quo ...

  7. c#搭建服务端 简单中最高效的数据操作Linq (4)

    .NET F 3.5之后提出的linq to sql 概念,大大的简化了对于数据对象的操作,可以通过简单的语法直接操作数据对象,如List,Linq to sql类 等等. 1.使用Linq to s ...

  8. python socket理论知识

    一.socket理论: 发现一个很好的文章,一个高手写的,我也就不再做搬运工了,直接连接吧,对理论感兴趣的可以去看看! http://www.cnblogs.com/dolphinX/p/346054 ...

  9. 一步一步学c#（四）：继承

    继承 1·继承的类型 在面向对象的编程中,有两种截然不同的继承类型,实现继承和接口继承. 实现继承:表示一个类型派生于一个基类型,它拥有该基类型的所有成员字段和函数. 接口继承:表示一个类型只继承了函 ...

  10. Maven java项目管理工具

    Maven java项目管理工具 1.安装maven 下载最新的maven 下载地址 http://maven.apache.org/download.cgi 传到要安装的目录 例如/opt/下 # ...