html - 溢出：隐藏无法始终如一地工作

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。