Overflow: versteckt funktioniert nicht konsistent

Ich arbeite an einigen Tasten. Ich möchte einen Rollover-Status haben und ich habe dies in einem Bild in einem div mit Überlauf: versteckt, um den Zustand zu verbergen, der nicht aktiv ist. Es funktioniert manchmal, aber manchmal sieht es wie folgt aus:Overflow: versteckt funktioniert nicht konsistent

Broken

Der seltsamste Teil ist, dass, wenn ich versuche, den Chrome Web Inspector zu verwenden, um es andockt! Und im HTML/CSS sieht nichts komisch aus.

Working

Ich bin super verwirrt, warum es nicht konsequent entweder defekt ist oder arbeiten.

Hier ist der 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>

Und die entsprechende 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; 
}

Quelle

2012-04-13 Brad Dwyer

Können Sie teilen, wie Sie den Rollover machen? Ist es js oder css? – bhamlin

Editiert es in, CSS. Wir machen auch ein JS, um mit den Zuständen dieser Schaltflächen zu arbeiten, aber das wird nur mit einem Klick ausgeführt, so dass es nicht ins Spiel kommen sollte, da dies beim Laden der Seite funktioniert. –

Da muss noch etwas anderes los sein. Ich habe versucht, Ihr Problem mit diesem jsFiddle zu replizieren: http://jsfiddle.net/zaTMh/3/ , aber ich kann nicht repro ... – bhamlin

Die Lösung wurde von einer Spanne auf einen div einem seiner Container zu ändern.

Quelle

2012-05-17 14:29:02

Overflow: versteckt funktioniert nicht konsistent

Antwort

Verwandte Themen