需要注意的是  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. Apache commons (Java常用工具包)简介

    Apache Commons是一个非常有用的工具包,解决各种实际的通用问题,下面是一个简述表,详细信息访问http://jakarta.apache.org/commons/index.html Be ...

  2. Get Intellisense for .axml files in Visual Studio

    原文Get Intellisense for .axml files in Visual Studio So in order to get some intellisense support for ...

  3. 看大数据时代下的IT架构（1）业界消息队列对比

    一.MQ(Message Queue) 即 消息队列,一般用于应用系统解耦.消息异步分发,能够提高系统吞吐量.MQ的产品有很多,有开源的,也有闭源,比如ZeroMQ.RabbitMQ. ActiveM ...

  4. linux下修改.bash_profile立即生效的三种方法

    1 . .bash_profile 2 source .bash_profile 3 exec bash --login

  5. Oracle Dataguard HA (主备,灾备)方案部署调试

    包括: centos6.5 oracle11gR2 DataGuard安装 dataGuard 主备switchover角色切换 数据同步测试 <一,>DG数据库数据同步测试1,正常启动主 ...

  6. 整理Linux查看系统日志的一些经常使用命令

    整理Linux查看系统日志的一些经常使用命令 last -a 把从何处登入系统的主机名称或ip地址,显示在最后一行. -d 指定记录文件.指定记录文件.将IP地址转换成主机名称. -f <记录文 ...

  7. FPGA中浮点运算实现方法——定标

    有些FPGA中是不能直接对浮点数进行操作的,仅仅能採用定点数进行数值运算.对于FPGA而言,參与数学运算的书就是16位的整型数,但假设数学运算中出现小数怎么办呢?要知道,FPGA对小数是无能为力的,一 ...

  8. JavaScript 开发经验整理

    前言 今年接触了一个B/S的项目,总结了一些JavaScript开发经验,整理些有用的内容与大家分享. 本文会持续更新... 1.实现代码访问的控制 随着项目JavaScript代码库扩大,本应被控制 ...

  9. ORACLE恢复误删除的对象(表、存储过程等)

    1.恢复存储过程 原理就是利用了oracle里所有的存储过程的源代码都是存在dba_source里,而drop某个存储过程的时候,oracle这里肯定要去dba_source里把相关的源代码给dele ...

  10. Objective-C中一些 值得程序员注意的地方(转载)

    1.有关于BOOL陷井方面有如下方面: 关于BOOL条件语句中的比较最好是与NO的值来进行比较,因为BOOL的YES与NO值只是约定,并且编译器将BOOL认作8位二进制数据.若是不小心将一个长于1字节 ...