需要注意的是  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. centeros resin安装脚本启动

    公司用的服务器是resin+apache #! /bin/sh # # See contrib/init.resin for /etc/rc.d/init.d startup script # # r ...

  2. 26个jQuery使用小技巧(25)

     下面列出了一些Jquery使用技巧.比如有禁止右键点击.隐藏搜索文本框文字.在新窗口中打开链接.检测浏览器.预加载图片.页面样式切换.所有列等高.动态控制页面字体大小.获得鼠标指针的X值Y值.验证元 ...

  3. U盘常见故障及检修

    一般U盘故障分为软故障和硬故障,其中以软故障最为常见.  软故障主要是指U盘有坏块,从而导致U盘能被计算机识别,但没有盘符出现,或者有盘符出现,但当打开U盘时却提示要进行格式化,而格式化又不能成功.前 ...

  4. #include <vector>

    双端队列deque比向量vector更有优势 vector是动态数组,在堆上 vector比array更常用 不需要变长,容量较小,用array 需要变长,容量较大,用vector 1 at() 取出 ...

  5. 关于微信的jsapi_ticket的获取方法;

    对于一个从前端转到后端的开发人员来说,这个玩意儿开始的时候是有点郁闷:不过明白原理之后就简单了, 获取jsapi_ticket:必须先获取access_token; 微信开发文档说access_tok ...

  6. python setattr(),getattr()函数

    setattr(object,name,value): 作用:设置object的名称为name(type:string)的属性的属性值为value,属性name可以是已存在属性也可以是新属性. get ...

  7. The "Run One Program Only" Phenomenon

    As previously discussed,embedded devices normally embody the functionality they implement.In other w ...

  8. hdu1114Piggy-Bank(DP完全背包)

    题意:在ACM可以做任何事情,必须准备和预算获得必要的财政支持.这次行动的主要收入来自不可逆绑定金钱(IBM).背后的想法很简单.每当一些ACM成员有任何小的钱,他把所有的硬币和成小猪银行抛出.你知道 ...

  9. android 强制设置横屏 判断是横屏还是竖屏

    判断activity 是横屏还是竖屏  方法 1: //根据设备配置信息 Configuration cf= this.getResources().getConfiguration(); //获取设 ...

  10. Rabbit and Grass（杭电1849）（尼姆博弈）

    Rabbit and Grass Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...