问题:鼠标放在卡片最下端发生不停闪动

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

<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;

  }

}

posted @ 2019-03-05 14:58  coconutGirl  阅读(196)  评论(0编辑  收藏  举报