悬停时动画

顾辰呀

已于 2023-06-10 13:38:48 修改

阅读量29

点赞数

文章标签： css css3 前端

于 2023-06-06 15:25:22 首次发布

本文链接：https://blog.csdn.net/weixin_45776545/article/details/131068804

版权

       <div class="app_wx">
          <img src="../assets/home/dofafo_wx.jpg" alt="" />
          <div class="name">--微信小程序--</div>
        </div>        


.app_wx {
          position: absolute;
          left: 400px;
          top: -10px;
          text-align: center;
          .name {
            font-size: 14px;
            margin-top: 10px;
          }
          img {
            width: 90px;
            height: 90px;
            &:hover {
              transform: scale(1.1);
              width: 150px;
              height: 150px;
              transition: all 0.5s;
            }
            &:hover + .name {
              display: none;
            }
            &:not(:hover) {
              /* 在鼠标离开时的样式 */
              transform: scale(1);
              width: 90px;
              height: 90px;
              transition: all 0.5s;
            }
            &:not(:hover) + .name {
              /* 在鼠标离开时的样式 */
              display: block;
              opacity: 1;
              transition: all 0.5s;
            }
          }
        }