• 工信部:17年12批新能源车推荐车型目录 2019-05-11
  • 美国再挑贸易战,中方强力回击,全球市场跌声一片 2019-05-11
  • 四川都江堰再现野生大熊猫踪迹 比3月拍到的更肥 2019-05-10
  • 坚持和发展马克思主义的宣言书 2019-05-10
  • 解析视频播控平台黑产链 20元看12家网站VIP会员视频 2019-04-26
  • 众星云集 “欧洲红魔”能否用战绩兑现黄金一代的天赋 2019-04-26
  • 比如最高检的12309检查服务中心,原来还有显示信访处理进程,不过没有几天就取消了。[上火][上火] 也就是说办与不办也没有人知道,下边省事了,上边也就轻松了。 2019-04-16
  • 男女差别有多大?河北省首次公开发布分性别统计分析报告 2019-04-05
  • 菲律宾媒体和网民热议"中国剧场"开播 2019-04-05
  • 坚持和完善我国基本经济制度的两条新经验 2019-04-02
  • 5月份61城房价环比反弹 多地调控政策或再加码 ——凤凰网房产济南 2019-04-02
  • [洞见]草榴死了 欲望还活着草榴性 2019-04-02
  • 回顾:五年来习近平的“两会金句” 2019-04-02
  • 云南省2018年度国家社科基金项目申报工作的几点做法 2019-04-01
  • 地理君的专栏作者中国国家地理网 2019-04-01

    河北体彩11选五走势图:鼠标悬浮出现虚线边框

    燕赵风采20选5走势图 www.fllv.net 2018-12-1 23:03| 作者: admin| 查看: 1357| 评论: 0|来自: 蚂蚁部落

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

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

    代码实例如下:

    [HTML] 纯文本查看 复制代码运行代码
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="author" content="//www.fllv.net/" />
    <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="//www.fllv.net/" />
    <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="//www.fllv.net/" />
    <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一章节。

    最新评论

    返回顶部
  • 工信部:17年12批新能源车推荐车型目录 2019-05-11
  • 美国再挑贸易战,中方强力回击,全球市场跌声一片 2019-05-11
  • 四川都江堰再现野生大熊猫踪迹 比3月拍到的更肥 2019-05-10
  • 坚持和发展马克思主义的宣言书 2019-05-10
  • 解析视频播控平台黑产链 20元看12家网站VIP会员视频 2019-04-26
  • 众星云集 “欧洲红魔”能否用战绩兑现黄金一代的天赋 2019-04-26
  • 比如最高检的12309检查服务中心,原来还有显示信访处理进程,不过没有几天就取消了。[上火][上火] 也就是说办与不办也没有人知道,下边省事了,上边也就轻松了。 2019-04-16
  • 男女差别有多大?河北省首次公开发布分性别统计分析报告 2019-04-05
  • 菲律宾媒体和网民热议"中国剧场"开播 2019-04-05
  • 坚持和完善我国基本经济制度的两条新经验 2019-04-02
  • 5月份61城房价环比反弹 多地调控政策或再加码 ——凤凰网房产济南 2019-04-02
  • [洞见]草榴死了 欲望还活着草榴性 2019-04-02
  • 回顾:五年来习近平的“两会金句” 2019-04-02
  • 云南省2018年度国家社科基金项目申报工作的几点做法 2019-04-01
  • 地理君的专栏作者中国国家地理网 2019-04-01
  • 黑金团队快乐8下载地址 幸运飞艇pk10全天计划 双色球重庆彩票网58期 东方6+1规则 七位数开奖号码 湖南幸运赛车技巧 重庆时时彩手机APP 大乐透杀号 88彩票极速时时彩是不是一个骗局 福彩高频彩这块 北京赛车pk10保本 北京单场比赛直播 11077期半全场 pk10免费计划软件安卓 北京赛车pk10下截直播 排列三跨度走势图