Wie steuert man div beim Hover:?

Ich habe eine Möglichkeit gefunden, die Hintergrundfarbe einer Menüoption beim Hover zu ändern. Wenn du jedoch eine Option überstreichst, nimmt sie viel Platz in Anspruch, der alle anderen Optionen nach rechts verschiebt, was irgendwie nervig ist. Ich möchte einen konsistenten Abstand beibehalten. Wenn ich also schwebe, sollte sich nur die Farbe ändern, nicht die Option nach rechts bewegen. So wie Facebook seine Menüoptionen hat.Wie steuert man div beim Hover:?

Unten ist der Code:

<div id="menu"> 
    <a href="/hello" id="option">home</a> 
    <a href="/hello" id="option">profile</a> 
    <a href="/hello" id="option">account</a> 
    <a href="/hello" id="option">settings</a> 
    <a href="/hello" id="option">extra</a> 
    <a href="/hello" id="option">logout</a> 
    </div>

CSS:

div#menu { 
    margin-left: 630px; 
    margin-top:-20px; 
    } 
    option { 
    margin-left: 20px; 
    } 
    #option:hover{ 
    background: #3F2327; 
    padding: 10px; 
    }

Quelle

2011-01-15 AAA

Mögliche Lösung: Mit vor und nach einer Menüoption gibt mir das Aussehen, das ich brauche. Aber nicht sicher, ob das eine gute Übung ist? – AAA

padding: 10px;

Raum entfernen um ein Element Platz in Anspruch nimmt, wenn Sie also Raum nicht wollen, don‘ t füge es hinzu. Wenn Sie es die ganze Zeit wollen, fügen Sie die ganze Zeit und nicht nur für :hover

auch in keinem Zusammenhang mit Ihrem Problem, aber nur gute Praktiken:

Wenn Sie einen Browser verwenden, der doesn CSS nicht unterstützen, hat es ausgeschaltet, oder ist nicht grafisch Sie am Ende mit Home-Profil-Konto Einstellungen extra Logout - Sie haben eine Liste von Links, verwenden Sie list markup. Es gibt viele guidance on making it pretty.
Eine ID muss eindeutig in einem Dokument sein, nur verwenden, um ein bestimmtes Element zu identifizieren. Verwenden Sie das Klassenattribut, wenn Sie angeben möchten, dass mehrere Elemente alle Mitglieder derselben Klasse sind.
Vermeiden Klasse und ID-Namen verwenden, die die gleiche wie HTML elements sind, ist es verwirrend nur Code

Quelle

2011-01-15 00:41:37 Quentin

Zwischen diesen Ankern gibt es Leerräume, so dass es tatsächlich eine sehr gut lesbare "Home-Profil-Account-Einstellungen extra Logout" macht. Um nicht zu sagen, es ist keine wirklich gute Idee, eine richtige HTML-Liste zu verwenden, nur dass dies nicht der Grund ist. – coreyward

Ich brauche den Platz nicht, richtig. Aber ich benutze Padding, so dass der leere Bereich links und rechts neben der Option auch die Farbe ändert. Dies fügt den Leerraum hinzu. – AAA

@coreyward - guter Punkt, obwohl es immer noch ein Problem für Browser (wie Luchs) ist, die Links nicht unterstreichen - Sie können nicht sagen, wo man endet und das nächste beginnt. – Quentin

1) Sie vermissen ein # auf „Option“

2) Warum sind Klotzen Sie auf schweben macht ? Das wird eine Bewegung verursachen, wenn Sie darüber schweben.

Quelle

2011-01-15 00:42:34 Mic

Ich verwende Padding, so dass der leere Bereich links und rechts neben der Option auch die Farbe ändert. Dies fügt den Leerraum hinzu. – AAA

Antwort

Verwandte Themen