需要注意的是  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/C++招聘的一些感受和经验【转】

    找工作本人认为最重要的就是前期准备了.     首先.简历一定要写的切合主题.招聘单位要的是你的技能,这个只要大概能符合就可以,关键他们需要的是你的开发经验,一定要在简历中完美的体现出你之前所参与的项 ...

  2. AutoIt 函数学习之----WinWaitActive

    WinWaitActive函数 暂停脚本的执行直至指定窗口被激活(成为活动状态)为止. WinWaitActive ( "窗口标题"[, "窗口文本"[, 超时 ...

  3. JAVA I/O使用方法（转）

    下面四张图表明了类之间的继承关系,其中红色.加粗的类名是常用的类. 常用转换 FileReader——>BufferedReader BufferedReader in= new Buffere ...

  4. Boost::Thread使用示例 - CG-Animation - 博客频道 - CSDN.NET

    Boost::Thread使用示例 - CG-Animation - 博客频道 - CSDN.NET Boost::Thread使用示例 分类: C/C++ 2011-07-06 14:48 5926 ...

  5. php使用check box

    if (isset($_POST['submit'])) { foreach ($_POST['todelete'] as $delete_id) { //这里是循环遍历这个数组 todelete 每 ...

  6. _.each的用法2

    有这样一个需求:一个对象数组: 内容如下: {[ {id:"ssss",position:"4"}, {id:"ssss",position ...

  7. copyleft 与 copyright

    直到今天才知道Copyleft这个名词(orz...) 我们经常能见到的是 Copyright(著作权),这个对版权的保护,保证作者权益. 它的对立面就是Copyleft,它允许用户自由修改 使用作品 ...

  8. SQL学习之汇总数据之聚集函数

    一. 1.我们经常需要汇总数据而不用把他们实际检索出来,为此SQL提供了专门的函数,以便于分析数据和报表生成,这些函数的功能有: (1)确定表中行数(或者满足单个条件或多个条件或包含某个特定值的行数) ...

  9. asp.net验证码及怎么获取里面的数值（整合）

    一.ASP.Net的验证码的作用 对于一个预防攻击的web表单来讲,验证码通常是一个常见的措施.因为如果对于一些public区域的页面内容来讲,譬如一个登录表单,如果没有必要的安全措施,很可能遭到模拟 ...

  10. Java I/O流操作(二)---缓冲流[转]

    转自:http://blog.csdn.net/johnny901114/article/details/8710403 一.BufferWriter类 IO的缓冲区的存在就是为了提高效率,把要操作的 ...