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

背景

相信大家在做项目的过程中会经常遇到这样的一个需求,鼠标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 条评论
登录 后参与评论

相关文章

来自专栏腾讯IVWEB团队的专栏

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

相信大家在做项目的过程中会经常遇到这样的一个需求,鼠标 hover 到某个元素的时候为这个元素添加边框,这个简单的需求仅需注意添加边框后不会对原有的位置造成布局...

1140
来自专栏一“技”之长

Bootstrap响应式前端框架笔记六——图片与其他辅助类

    在页面中插入图片,Bootstrap框架中定义了3中图片的Css类样式,分别为圆角图片img-rounded类,圆形图片img-circle类和带边框的...

712
来自专栏菩提树下的杨过

[silverlight基础]仿文字连接跑马灯效果-高手绕道

运行效果如下: ? 分析示意图: ? 代码:  <Canvas x:Name="a" Background="AliceBlue" MouseEnter="a_...

17910
来自专栏LIN_ZONE

css 中 zoom和transform:scale的区别(转载)

还在几年前,zoom还只是IE浏览器自己私有的玩具,但是,现在,除了FireFox浏览器,其他,尤其Chrome和移动端浏览器已经很好支持zoom属性了:

593
来自专栏儿童编程

儿童编程Scratch之“画笔”基础功能学习总结

Scratch中“画笔”功能能够让使用者模拟画笔在舞台上创作,合理运用能够给作品带来极大的趣味性。

862
来自专栏青玉伏案

IOS开发之绝对布局和相对布局(屏幕适配)

之前如果做过Web前端页面的小伙伴们,看到绝对定位和相对定位并不陌生,并且使用起来也挺方便。在IOS的UI设计中也有绝对定位和相对定位,和我们的web前端的绝对...

2226
来自专栏十月梦想

HTML5音频audio和视频video用法解析

    html5新增加了2个媒体标签音频(audio)和视频(video),这样就更便于我们进行媒体化元素的内容开发网页!!!

722
来自专栏一“技”之长

iOS中UITableViewController自带的刷新控件

        在iOS开发中,使用tableView的界面,大多会用到一个下拉刷新的的控件,第三方库中,我们一般会选择比较好用的MJRefresh,其实,在i...

673
来自专栏知道一点点

八种创建等高列布局【出自w3c】

高度相等列在Web页面设计中永远是一个网页设计师的需求。如果所有列都有相同的背景色,高度相等还是不相等都无关紧要,因为你只要在这些列的父元素中设置一个背景色就可...

804
来自专栏Web项目聚集地

CSS布局解决方案(全屏布局)

原文连接:https://segmentfault.com/a/1190000013565024#articleHeader1

1124

扫码关注云+社区