HTML-Etikett vor dem Eingang CSS-hover-Staaten
Ich habe ein Formular, wo ich legte meine Etiketten vor Eingaben wie diese:
<label for="email">Confirm Email</label>
<input type="text" id="email" />
<label for="firstname">First Name</label>
<input type="text" id="firstname" />
<label for="lastname">Last Name</label>
<input type="text" id="lastname" />
<label for="company">Company</label>
<input type="text" id="company" />
Wenn ich versuche, verwenden Sie die CSS-style, das label, wenn ich bewegen Sie die Eingänge wie folgt aus (input:hover + label
), die CSS für das nächste Etikett anstatt auf die, die das for=
Eigenschaft. Zum Beispiel, wenn ich versuche, Sie zu bewegen Sie den E-Mail-Eingang, - es gelten die input:hover+label
Effekt auf dem 2. Etikett mit for="firstname"
.
Meine design-Struktur-Etiketten auf der Oberseite und Eingänge unter Ihnen, so kann ich nicht wechseln Ihre position.
Gibt es eine Lösung für dieses?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Mit einigen cleveren CSS können Sie das Etikett nach dem Eingang, aber immer noch das Etikett schauen, wie es ist auf der Oberseite der Eingang http://jsfiddle.net/8YqN2/2/
CSS
ich glaube nicht, dass dies möglich ist mit CSS alleine, wenn Sie Leben können mit der Wirkung für die Nutzer mit JS aktiviert, können Sie die folgenden verwenden. http://jsfiddle.net/8YqN2/1/Du machst es falsch. Das "+" Zeichen ist ein "adjacent sibling selector".
In Ihrem Fall, die Auswahl entspricht der
label
- element, das die nächsten Geschwister zuinput:hover
.CSS kümmert sich nicht um die
for
Attribut, es kümmert sich umid
,class
, und die Hierarchie der Elemente.Haben Sie nicht erwähnt, was es ist, das Sie erreichen wollen exatly, sondern geben Sie diese ein Schuss:
HTML
CSS
Wickeln Sie den "label" - text in eine
<span>
tag, wenn Sie benötigen.label:hover input {/* something */}
um zu verhindern, dass die Eingabe Erben Eigenschaften der label -Ich hoffe, das hilft
diese ohne jquery