问题:鼠标放在卡片最下端发生不停闪动
背景:鼠标浮在卡片上,实现卡片向上位移的效果
<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;
}
}