鼠标悬浮出现虚线边框

2018-12-1 23:03| 作者: admin| 查看: 476| 评论: 0|来自: 凯博

当鼠标悬浮某个元素的时候,为了醒目,可能会呈现不同的效果。

本文介绍一下如何利用CSS实现鼠标悬浮div,出现虚线边框的功能。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码




凯博



  

代码运行效果截图如下:

a:3:{s:3:\

利用:hover伪类选择器成功实现鼠标悬浮出现虚线边框效果。

但是这里需要注意一点,当鼠标悬浮的时候,整个div所占据的尺寸会增加。

因为毕竟多了一层边框,如果需要保持尺寸不变,代码修改如下:

[HTML] 纯文本查看 复制代码运行代码




凯博



  

当鼠标悬浮的时候,分别将div元素的宽高减少2px即可。

上述代码兼容性较好,除去IE6之外,所有主流浏览器都支持。

如果不考虑浏览器兼容性问题,可以采用如下代码:

[HTML] 纯文本查看 复制代码运行代码




凯博



  

上述代码实现了相同的效果,采用怪异模式下盒模型。

box-sizing属性可以参阅CSS3 box-sizing一章节。

最新评论

返回顶部