上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

CSS hover扩大宽度

[复制链接]
  • TA的每日心情
    开心
    19 小时前
  • 签到天数: 130 天

    [LV.7]常住居民III

    433

    主题

    3865

    帖子

    3937

    积分

    管理员

    非物质文化遗产社会摇传承人

    Rank: 10Rank: 10Rank: 10

    积分
    3937

    喜迎中秋国庆纪念章荣誉开发者家财万贯管理员油中2周年

    发表于 2022-11-23 21:10:57 | 显示全部楼层 | 阅读模式

    图片.png
    图片.png
    图片.png
    代码如下

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
      </head>
      <body>
        <div class="wrap">
          <div class="block1"></div>
          <div class="block2"></div>
        </div>
      </body>
      <style>
        .wrap {
          width: 800px;
          background-color: black;
          height: 240px;
          display: flex;
        }
        .block1 {
          background-color: red;
          flex: 1 1 0;
          transition: all 1s;
        }
        .block2 {
          background-color: yellow;
          flex: 1 1 0;
          transition: all 1s;
        }
        .block1:hover,
        .block2:hover {
          flex-basis: 500px;
          flex-grow: 0;
        }
      </style>
    </html>
    
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
  • TA的每日心情
    开心
    4 天前
  • 签到天数: 9 天

    [LV.3]偶尔看看II

    0

    主题

    7

    帖子

    10

    积分

    助理工程师

    Rank: 1

    积分
    10

    油中2周年新人报道国庆纪念章

    发表于 2022-11-23 23:47:54 | 显示全部楼层
    ggnb!
    回复

    使用道具 举报

  • TA的每日心情
    开心
    19 小时前
  • 签到天数: 130 天

    [LV.7]常住居民III

    433

    主题

    3865

    帖子

    3937

    积分

    管理员

    非物质文化遗产社会摇传承人

    Rank: 10Rank: 10Rank: 10

    积分
    3937

    喜迎中秋国庆纪念章荣誉开发者家财万贯管理员油中2周年

    发表于 2022-11-23 23:59:07 | 显示全部楼层

    哥哥牛逼~
    头像好看
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表