html - CSS 效果添加为主动效果

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

我不能发表评论，所以我只想发布你最近关于移动圆圈的问题

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 */

}