html - オーバーフロー: 非表示が一貫して機能しない

Question

私はいくつかのボタンに取り組んでいます。ロールオーバー状態にしたいのですが、アクティブでない状態を非表示にするために、overflow:hidden を使用して 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

解決策は、コンテナーの 1 つをスパンから div に変更することでした。