需要注意的是  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. Hash算法原理理解

    我们有很多的小猪,每个的体重都不一样,假设体重分布比较平均(我们考虑到公斤级别),我们按照体重来分,划分成100个小猪圈. 然后把每个小猪,按照体重赶进各自的猪圈里,记录档案. 好了,如果我们要找某个 ...

  2. 开发框架CIIP

    github开源:企业级应用快速开发框架CIIP WEB+WIN+移动端   简介 CIIP是基于XAF开发的开源信息系统框架.CIIP最常见的应用场景是基于数据库的企业级应用程序,例如供应链系统,E ...

  3. 查询linux发行版本号方法总结

      了解Linux发行版本的版本号是一项非常重要的事情,大多数软件对系统的版本都有要求,发行版本号与软件不匹配,软件将无法安装或者无法使用.这边集合市面上流行的Linux发行版本版本号查询方法.有了这 ...

  4. 车间任务不允许"每个装配件"超过100000

    应用 Oracle Work in   Progress 层 Level Function 函数名 Funcgtion Name WIP_WIPMRMDF 表单名 Form Name WIPMRMDF ...

  5. Syslog Cisco Incident

    http://www.cisco.com/web/about/security/intelligence/identify-incidents-via-syslog.html

  6. 省去路由器，Windows 7 也能做无线AP

    电脑越来越白菜了,很多朋友家里已经有不少于二台电脑了.比方说一台笔记本一台台试机,哪么上网和联机的问题,随之而来了,二台电脑很多人可能会去买一个路由器,事实上,如果你其中一台有二个网卡一个有线一个无线 ...

  7. [置顶] ProcessOn:划时代性的在线作图工具

    ProcessOn是一款专业作图人员的社交网络,这里汇聚很多业界专家.学者,同时他们分享的作品又形成一个庞大的知识图库,你在学习专业知识的同时还可以结交一些志同道合的新朋友. ProcessOn核心设 ...

  8. OAuth认证的过程

    在认证和授权的过程中涉及的三方包括:     服务提供方,用户使用服务提供方来存储受保护的资源,如照片,视频,联系人列表.     用户,存放在服务提供方的受保护的资源的拥有者.     客户端,要访 ...

  9. 《UML和模式应用》重点之思想篇

    本书是帮助开发人员和学生学习面向对象分析和设计(OOA/D)的核心技能的重要工具. UML不是OOA/D.也不是方法,仅仅是图形表示法,假设没有真正掌握怎样创建优秀的面向对象设计,或者怎样评估和改进现 ...

  10. Excel几个常用操作

    1.冻结第一行:视图->冻结窗格->冻结首行 2.第一行自动筛选:选择要设置的行,数据->筛选->自动筛选 3.在单元格中添加下拉菜单:(1)选中一列,数据->数据验证. ...