鼠标悬浮出现虚线边框

2018-12-1 23:03| 作者: admin| 查看: 91| 评论: 0|来自: 蚂蚁部落

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

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

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
.box{
  width:100px;
  height:60px;
  background-color:#ccc;
}
.box:hover{
  border:1px dotted blue;
}
</style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201812/01/230433lv0teqv300vlildt.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

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

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

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
.box{
  width:100px;
  height:60px;
  background-color:#ccc;
}
.box:hover{
  border:1px dotted blue;
  width:98px;
  height:58px;
}
</style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

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

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

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

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
.box{
  width:100px;
  height:60px;
  box-sizing:border-box;
  background-color:#ccc;
}
.box:hover{
  border:1px dotted blue;
}
</style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

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

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


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部