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

作者:莫卓颖

背景

相信大家在做项目的过程中会经常遇到这样的一个需求,鼠标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的元素加"套"么?欢迎留言讨论

原文链接:http://ivweb.io/topic/565c485dbb6a753a136242bf

原创声明,本文系作者授权云+社区-专栏发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端说吧

CSS- ie6,ie7,ie8 兼容性写法,CSS hack写法

1964
来自专栏xingoo, 一个梦想做发明家的程序员

【前端开发系列】—— 文字阴影与样式

id与class的区别 id是这个界面唯一的元素,标识某个特定的容器,比如div等等。而class是一种样式,可以应用与多个div。 另外他们在配置CSS也是不...

1789
来自专栏腾讯NEXT学位

CSS布局解决方案(上)

2784
来自专栏企鹅号快讯

前端小知识:为什么你写的 height:100% 不起作用?

作者:JiaXinYi https://segmentfault.com/a/1190000012707337 这个知识不算冷门的,但是用的时候可能还是会有些懵...

1825
来自专栏张俊红

网页的修饰

总第61篇 上一篇推送了网页的基本构成,链接地址:网页是怎么构成的?,这篇来讲讲网页的修饰,正如字面意思一般,本篇分享的内容是用来修饰网页的,是让网页变得更加好...

3587
来自专栏前端知识分享

第3天:CSS浮动、定位、表格、表单总结

今天学的是浮动、定位、表格、表单等内容,这些是CSS中最容易混淆的知识,有许多小技巧在写代码过程中需要注意。下面是主要知识点:

583
来自专栏Micro_awake web

谈谈CSS中一些比较"偏门"的小知识 前面我写了:谈谈html中一些比较"偏门"的知识,现在这篇(主要)想谈谈个人所见的CSS一些小知识点,加深印象;同时也希望有需要的人能有收获!

前面我写了:谈谈html中一些比较"偏门"的知识,现在这篇(主要)想谈谈个人所见的CSS一些小知识点,加深印象;同时也希望有需要的人能有收获! 1.常见的浏览器...

1866
来自专栏河湾欢儿的专栏

2.布局解决方案- 水平布局<1>

水平布局 写出两个盒子并满足以下条件条件: 1.里面的宽度盒子不固定 2.外面盒子的宽度不固定

793
来自专栏web编程技术分享

【H5 音乐播放实例】第二节 音乐详情页制作(2)1.2 音乐盒子区域

2145
来自专栏有刻

不同浏览器下兼容文本两端对齐

3466

扫码关注云+社区