需要注意的是  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. openssl编译（VC6.0）

    官网:http://www.openssl.org/ 得到源码: git clone  https://github.com/openssl/openssl 一.用vc编译器编译: 1.下载nasm: ...

  2. git Bug分支

    Bug分支 软件开发中,bug就像家常便饭一样.有了bug就需要修复,在Git中,由于分支是如此的强大,所以,每个bug都可以通过一个新的临时分支来修复,修复后,合并分支,然后将临时分支删除. 当你接 ...

  3. PHPExcel 多工作表 导出

    //浏览器输出excel header('Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet ...

  4. 如何显示Mac OS X上的隐藏文件和文件夹

    显示隐藏文件以及文件夹命令: defaults write com.apple.finder AppleShowAllFiles YES Mac显示隐藏文件 对于OS X Mavericks 10.9 ...

  5. Pie（求最小身高差，dp）

    Pie Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submis ...

  6. [置顶] android 自定义圆角ImageView以及锯齿的处理

    看到很多人开发过程中要使用圆角图片时,解决方法有: 1.重新绘制一张图片 2.通过布局来配置 3.通过重写View来实现 其中1,2在这里就不讲了,重点讲讲方法三的实现. 实现一:通过截取画布一个圆形 ...

  7. asp.net ToString()方法介绍

      C 货币 2.5.ToString("C") ￥2.50 D 十进制数 25.ToString("D5") 00025 E 科学型 25000.ToStri ...

  8. iWeb峰会见闻

    8.16去参加了iWeb峰会,一大早8点过10分就到了,发现外面已经排起了长队(说明影响力越来越大,关注的人越来越多了.) 此次大会参与的企业也越来越多,当然是有目的而来~ 上午 google商业合作 ...

  9. java中log4j的使用体验

    log4j相信大部分java开发者都已经很熟悉了,在此记录下自己的使用过程. 一.文件准备: 1.log4j.jar(我这里使用的版本是log4j-1.2.17.jar,在附件中提供下载) 2.log ...

  10. 初学JSoup

    jsoup 是一款 Java 的 HTML 解析器,可直接解析某个 URL 地址.HTML 文本内容.它提供了一套非常省力的 API,可通过 DOM,CSS 以及类似于 jQuery 的操作方法来取出 ...