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

CSS hover扩大宽度

[复制链接]
  • TA的每日心情
    慵懒
    2024-10-28 07:07
  • 签到天数: 193 天

    [LV.7]常住居民III

    712

    主题

    5961

    回帖

    6760

    积分

    管理员

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

    积分
    6760

    荣誉开发者喜迎中秋油中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>
    
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
  • TA的每日心情
    慵懒
    2023-12-3 17:20
  • 签到天数: 25 天

    [LV.4]偶尔看看III

    0

    主题

    13

    回帖

    13

    积分

    助理工程师

    积分
    13

    油中2周年新人报道油中3周年喜迎中秋挑战者 lv1

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

    使用道具 举报

  • TA的每日心情
    慵懒
    2024-10-28 07:07
  • 签到天数: 193 天

    [LV.7]常住居民III

    712

    主题

    5961

    回帖

    6760

    积分

    管理员

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

    积分
    6760

    荣誉开发者喜迎中秋油中2周年生态建设者

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

    哥哥牛逼~
    头像好看
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

    发表回复

    本版积分规则

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