css版hover现边框
需要注意的是 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现边框的更多相关文章
- css中hover设置边框后div中内容后移解决方法
<style> .demo{width:1200px;height:400px;background:#fff;} .demo:hover{border:1px solid #cecece ...
- .使用 HTML+CSS 实现如图布局,border-widht 5px,一个格子大小是 50*50,hover时候边框变为红色(兼容IE6+,考虑语义化的结构)
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- 纯css竟可以做出边框这样长宽度的过渡效果
边框效果如下:鼠标移到下面方形,就有效果 要是没有效果,点这个:https://murenziwei.github.io/testGit/Untitled1.html 正如你所看到的,这边框颜色只 ...
- CSS实现列表li边框重合问题
CSS实现列表li边框重合问题 2017年04月13日 21:04:18 阅读数:5066 在我们写东西的时候经常要用到ul,但是也经常会出现li边框重合的问题,如下图: 可以看到每个格子的右边框和 ...
- 多行图片hover加边框兼容IE7+
问题: 遇到多行多列排列的图片时,hover上去加边框会把下面的图片挤到别处 ============================================================ ...
- jQuery的hover方法搭配css的hover选择器,实现选中元素突出显示
问题简述: 今天做帮一个师姐做网页遇到一个这样的要求: 鼠标不移动进表格,表格透明度不变. 鼠标移动进表格,hover到的单元格透明度不变,没hover到的单元格透明度改变. 先贴我已经实现好的效果, ...
- 响应式移动端去除css的hover和jq的hover还有input在苹果下的默认样式
去除css的hover: /*直接给body添加ontouchstart*/ <body ontouchstart> 去除jq的hover: var winW01 = $(window). ...
- 经典的 div + css 鼠标 hover 下拉菜单
经典的 div + css 鼠标 hover 下拉菜单 效果图: 源码: <html> <head> <meta charset="utf-8"> ...
- CSS 关于文本 背景 边框整理
文本与字体 1)阴影:text-shadow 格式:text-shadow:5px 5px 3px #FFFFFF分别对应 水平方向 垂直方向 模糊程度 颜色值 代码: <!DOCTYPE ht ...
随机推荐
- Makefile写法
概述 -- 什么是makefile?或许很多Winodws的程序员都不知道这个东西,因为那些Windows的IDE都为你做了这个工作,但我觉得要作一个好的和professional的程序员,makef ...
- [摘]ASP.Net标准控件(TextBox控件)
TextBox控件 TextBox控件又称文本框控件,为用户提供输入文本的功能. 1.属性 TextBox控件的常用属性及说明如表1所示. 表1 TextBox控件常用属性及说明 属 性 说 ...
- Android中pendingIntent的深入理解
pendingIntent字面意义:等待的,未决定的Intent.要得到一个pendingIntent对象,使用方法类的静态方法 getActivity(Context, int, Intent, i ...
- 开源 免费 java CMS - FreeCMS1.9 简历管理
项目地址:http://code.google.com/p/freecms/ 简历管理 管理当前管理网站的简历数据. 1. 回复简历 选择须要回复的简历.然后点击"回复". 注意: ...
- KJFrameForAndroid框架学习----高效设置网络图片
KJFrameForAndroid框架项目地址:https://github.com/kymjs/KJFrameForAndroid 或备用地址http://git.oschina.net/kymjs ...
- HTML之学习笔记(五)图片加载
Html图片的处理一般采用<img>标签 语法: 例如<img src="地址" /> 地址: ...
- 使用CSS3伸缩盒实现图片垂直居中
用CSS实现图片垂直居中的方法有很多,针对移动端设备可以用CSS3伸缩盒来实现图片垂直居中. 代码如下: <div class="box"> <img src=& ...
- Dearmweaver CS6 如何添加emmet 插件
一.关于emmet插件 已经接触前端工具的小伙伴们早听说过这个插件的鼎鼎大名了吧,emmet可以说是前端工程师的利器,就连老牌dreamweaver 都可以支持,我们怎么好意思拒绝这个好东西呢? 有 ...
- select2插件常用方法汇总
1.获取下拉框的value和text <input type="hidden" name="xa" id="xa" data-plac ...
- android退出activity的方式总结(一)
在android中使用:[activityname].this.finish(); 只是退出了activity的堆栈中,要真正的退出程序在手机cpu中的运行,当应用不再使用时,通常需要关闭应用,可以 ...