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

Question

私はいくつかのボタンを操作しています。私はロールオーバー状態を作りたいと思っています。これをオーバーフローのあるdivの画像に入れました。アクティブではない状態を隠すために隠されています。それは時々動作しますが、時にはそれは次のようになります。

奇妙な部分は私がChromeウェブインスペクタを使用しようとすると、それは自分自身を修正するということです！ HTML/CSSでは何も変わっていません。

私はそれが一貫して壊れたか、作業のどちらかではない理由として、超混乱しています。

<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にそのコンテナの1つを変更することでした。ここ

はHTMLです。