zoukankan      html  css  js  c++  java
  • 问题:鼠标放在卡片最下端发生不停闪动

    背景:鼠标浮在卡片上,实现卡片向上位移的效果

    <div class="product_card">

      一些子元素

    </div>

    .product_card {

      margin-top: 20px;

    }

    .product_card:hover {

      margin-top: 14px;   // 看起来比其他的卡片向上位移了6px

      margin-top: 6px;    // 1、只有top改成了14,看起来向上了6px,但是当只有一个数据,也就是只有一个卡片的时候,会导致外层父元素的高度整体减少6px,造成外层父元素的相邻元素向上也动了一下

    }

    问题:hover到元素上,元素向上了6px,然后鼠标在最底部的时候不动,很微妙的底部位置保持不动,元素上去了,导致鼠标在的底部脱离了元素区域,不是hover在元素上了,所以会导致元素掉下来,然后掉下来又触发了hover,就会造成鼠标放在那里不动,结果卡片一直在向上向下的闪动。

    解决:product_card卡片再套一层父元素,把hover绑在父元素上面,即:

    <div class=‘product_card_wrap'>

      <div class="product_card">

        一些子元素

      </div>

    </div>

    .product_card_wrap {

      margin-top: 20px;

    }

    .product_card_wrap:hover {

      .product_card {

        margin-top: -6px;

      }

    }

  • 相关阅读:
    上下文管理器
    创建项目与介绍(2)
    虚拟环境的安装(1)
    爬虫-selenium(14-2)扩展
    爬虫10-1(协程)
    Python3笔记038
    Python3笔记037
    Python3笔记036
    Python3笔记035
    Python3笔记034
  • 原文地址:https://www.cnblogs.com/coconutGirl/p/10476848.html
Copyright © 2011-2022 走看看