溢出：隐藏不一致

Question

我正在研究一些按钮。我希望有一个翻转状态，我在div中的图像中有溢出：隐藏以隐藏不活动的状态。它有时有效但有时它看起来像这样：

最奇怪的是，当我尝试使用Chrome Web Inspector时，它会自行修复！在HTML / CSS中没有什么看起来很奇怪。

我非常困惑为什么它不会一直被破坏或工作。

这是HTML：

<div class="hunting_card_button">
    <div class="hunting_card_icon" id="gift_to_friend">
        <img src="/images/icons/friend2.png?1" />
    </div>
    Friend
</div>

相关的CSS：

.hunting_card_button {
    width: 65px;
    overflow: hidden;
    display: inline-block;
    text-align: center;
    margin: 0 2px 0 2px;
}
.hunting_card_icon {
    position: relative;
    right: 0;
}
.hunting_card_icon:hover {
    right: 65px;
    cursor: pointer;
}

Answer 1

解决方案是将其中一个容器更改为跨度的div。