为元素添加边框,你有多少种好办法?

背景

相信大家在做项目的过程中会经常遇到这样的一个需求,鼠标hover到某个元素的时候为这个元素添加边框,这个简单的需求仅需注意添加边框后不会对原有的位置造成布局的影响从而造成布局跳动。本文将会试图探讨完成这个简单需求的方法。

方案一

实现思路:为元素中预先设置边框,边框的颜色与元素所在父元素背景色一致,边框大小与hover时候的边框大小一致,鼠标hover过元素的时候只需要设置边框颜色便可。 兼容问题:无 实现代码:

html结构

<ul class="parent">
    <li>
    </li>
    <li>
    </li>
</ul>

CSS

.parent{
  width: 500px;
  background: #000;
  overflow: hidden;
}
.parent li{
  width: 200px;
  background: red;
  border: 2px solid #000;
  margin-right: 2px;
  height: 200px;
  float: left;
}
.parent li:hover{
  border:2px solid yellow;
}

方案二

实现思路:首先设置元素为position:relative,然后添加额外隐藏的边框元素,鼠标hover过元素的时候显示提前隐藏的边框元素 兼容问题:无 实现代码:

HTML结构

<ul class="parent">
  <li>
      <div class="bd"></div>
  </li>
    <li>
    <div class="bd"></div>
    </li>
</ul>

CSS

.parent{
  width: 500px;
  background: #000;
  overflow: hidden;
}
.parent li{
  position: relative;
  width: 200px;
  background: red;
  border: 2px solid #000;
  margin-right: 2px;
  height: 200px;
  float: left;
}
.parent li .bd{
  display: none;
  left: 0;
  top:0;
  width:198px;
  height: 198px;
  border: 2px solid yellow;
}
.parent li:hover .bd{
  display: block;
}

方案三

实现思路:当hover过元素的时候,利用设置属性box-sizing设置容器为怪异模式,即设置盒模型为 容器width = border + padding + 内width 兼容问题:

实现代码:

HTML结构

    <ul class="parent">
            <li>
            </li>
            <li>
            </li>
        </ul>

CSS

    .parent{
            width: 500px;
            background: #000;
            overflow: hidden;
        }
        .parent li{
            width: 200px;
            background: red;
            margin-right: 2px;
            height: 200px;
            float: left;
        }
        .parent li:hover{
            box-sizing:border-box;
            border: 2px solid yellow;
        }

方案四

实现思路:当hover过元素的时候,利用h5的新属性box-shadow为元素添加实体的阴影作为边框 兼容性:

实现代码:

HTML结构

    <ul class="parent">
            <li>
            </li>
            <li>
            </li>
        </ul>

CSS

  .parent{
    width: 500px;
    background: #000;
    overflow: hidden;
  }
  .parent li{
    width: 200px;
    background: red;
    margin-right: 2px;
    height: 200px;
    float: left;
  }
  .parent li:hover{
    box-sizing:border-box;
    box-shadow: inset 2px 2px 0 0 yellow,inset -2px -2px 0 0 yellow;
  }

您还能想到其他好办法为hover的元素加"套"么?欢迎留言讨论

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端说吧

CSS3-实现单选框radio的小动画

3013
来自专栏君赏技术博客

AutoLayout简洁之道

1.是IOS8新出的,属于表格一样的布局,我们暂时不用多管。 2.是进行两个试图进行约束的 3.是对于单个试图进行约束的,默认相对于父试图。 4.是对于约...

1062
来自专栏杨龙飞前端

前端命名规范化

1676
来自专栏进步博客

CSS表格布局实践

如何实现上图所示效果:左右两列的列宽由列内最宽单元格的宽度决定,进度条列占据剩余空间。(兼容到IE8就好了)

1303
来自专栏十月梦想

移动端适配之百分比适配

前面简单了了解了一下移动端,包括移动端的设备独立像素,物理像素,渲染像素以及像素比(DPR)等相关知识!接下来简单介绍一个比较简单的移动端适配方案!

1543
来自专栏别先生

HTML+CSS小实战案例

HTML+CSS小实战案例 登录界面的美化,综合最近所学进行练习 网页设计先布局,搭建好大框架,然后进行填充,完成页面布局 1 <html> 2 <head...

6949
来自专栏IMWeb前端团队

H5活动宣传页通用布局技术解决方案

本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载 一般来说,活动宣传页都是全屏的滑动,而移动端的视窗大小确实是有点零碎化,于是...

2335
来自专栏编程之路

羊皮书APP(Android版)开发系列(二十四)不常用但是很有用的两个属性:clipToPadding 和 clipChildren

1502
来自专栏编程坑太多

如何开发适配安卓和iOS双平台的React Native应用

1292
来自专栏彭湖湾的编程世界

【CSS/JS】如何实现单行/多行文本溢出的省略(...)--老司机绕过坑道的正确姿势

写前端UI的朋友们也许都遇到过这样的问题:我们需要实现这样一个需求,在一个父级元素中隐藏一个可能过长的文本: 这个文本可能是单行的: ? 也可能是多行的: ? ...

3378

扫码关注云+社区

领取腾讯云代金券