Question

我有以下html：

<div class="mon-img hovicon effect-1 sub-a mon-active">
    <img class="icon-active" src="http://placehold.it/125X125&text=Blood" width="100px" data-info="blood" />
</div>

mon-active在悬停时将我使用的悬停效果添加到div。然而，当mon-active被添加到div并再次徘徊时，它以某种方式弹跳，我想移动那个东西，但我已经经历了许多css更改但我不能让它像徘徊

这是我的JS fiddle

我想要的是让它像悬停一样，位置应该仍然相同。

我不知道如何实现它。

Answer 1

您已使用.mon-active:hover {padding: 0px;}，请使用padding: 7px;进行检查，展示位置问题将解决，js fiddle link http://jsfiddle.net/wpnimitz/8pvt62dv/。

Answer 2

只需在悬停时添加7px的边距： -

.mon-active:hover  {
    box-shadow: initial;
    box-sizing: initial;
    background: #009ddb;
    margin: 7px;
    padding: 0px;
}

Fiddle

Answer 3

您应该从活动div中删除悬停动画，以防止反复显示相同的动画。

Answer 4

我不能发表评论，所以我要发布移动圈子的最新问题

Updated Fiddle

为你的css添加了一些填充以使圆圈稳定。 CSS：

.mon-img {
    float: none;
    display: inline-block;
    margin: 0 auto;
    padding:7px; /* added to your code */
}

.hovicon.effect-1.sub-a:hover {
    background: rgba(72, 195, 245, 1);
    color: #41ab6b;
    padding: 7px; /* added to your code */
}

.mon-active:hover  {
    box-shadow: initial;
    box-sizing: initial;
    background: #009ddb;
    padding: 7px; /* added to your code */

}

CSS效果添加为活动效果

4 个答案: