Autovervollständigung und Hover Effekt

martinw1986

Folgendes Problem:

Ich habe einen div Container den ich per Hover Effekt, der auf einem anderen Element liegt, einblende.

In diesem Container befindet sich ein Formular. Wenn ich nun das Formular nutze und Firefox mir per Autovervollständigung Möglichkeiten anbietet und ich mit der Maus über die Autovervollständigung gehe, verschwindet der Container wieder, da wohl der Hover Effekt nicht mehr aktiv ist.

Jemand eine Idee wie ich das beheben kann? Kann ich die Autovervollständigung per CSS umformatieren?

Firefox Version: 3.6.3

PS: Im Iron/Chrome tritt dieser Effekt nicht auf.

MfG Martin

bugcatcher

Ohne Testcase kann man dazu wenig sagen. Insofern kann ich mal nur auf :focus verweisen, was vielleicht hilft. Aber das ist nur eine Vermutung.

Die Autovervollständigung kann man über ein Attribut im Formelement deaktivieren, mit CSS umgestalten kann man es hingegen nicht, da es kein Webseitenelement, sondern ein Browserelement ist und das ist off limits für den Seitenentwickler.

martinw1986

HTML Code:

Code

<div id='login'>
 <div id='test'>
  <p id='loginText'>
   Login
  </p>
  <div id='loginForm'>
   <form method='post'>
    Nutzername:
    <input name='username' type='text' />


    Passwort:
    <input name='passw' type='password' />




    <input name='login' type='submit' value='Anmelden' />
   </form>
  </div>
 </div>
</div>

Alles anzeigen

CSS:

Code

#login:hover div {
 visibility: visible;
}

#loginForm {
 visibility: hidden;
 position: absolute;
 width: 150px;
 padding: 5px;
 text-align: left;
}

Alles anzeigen

Mit Focus geht es nicht, da ich ja damit nur das INPUT Feld ansprechen kann ergo bleibt das INPUT Feld sichtbar aber der Rest leider nicht, da man ja leider mit CSS nur der DOM Baumstruktur folgendend Elemente beeinflussen kann.

Autovervollständigung abschalten steht außer Frage.

Vielleicht doch jemand ne Idee?

Shiek

Ich hab mir das grad mal im FF angesehen. Kannst du mal ein Bild posten, wie es im Chrome aussieht und wie du es demnach auch im FF haben willst?
PS: Schon hier nachgesehen?

martinw1986

Ums aussehen geht es nicht, das Problem ist das der Hover Effekt verloren geht wenn ich über die Box, mit den Vorschlägen die FF durch die Autovervollständigung macht, gehe.

Ergo wird der Container mit dem Formular wieder unsichtbar. Im Chrome ist dies nicht der Fall.

Frage ist kann ich das ändern das es im FF genauso geht oder nicht :-/

Shiek

Du hast in deiner css-file zu stehen:

Code

#login:hover div {

ich bin keine Programmiererin aber müsste es nicht so heißen in einer css-file:

Code

#login:hover {

Die div-Boxen schreibst du doch im html-Code, oder etwa nicht?

Ich versteh auch nicht wo hier der Hover-Effekt zum Einsatz kommen soll :-???
[Blockierte Grafik: http://img175.imageshack.us/img175/2920/hoverr.png]

bugcatcher

Sorry. Meine Chrome-Versionen handhaben das genauso wie Firefox und das ist auch richtig so.

Wenn du das <p>-Element mit der Cursur verlässt, hebst du den Hover-Effect auf. Was du automatisch machst, wenn du runter zum Formular gehst. Das loginForm-<div> ist auch kein Child-Element vom <p>, damit wäre auch eine Vererbung nicht gegeben. Mit dem position:absolute nimmst du zudem das Element aus dem Verbund, selbst wenn es genestet gewesen wäre. Spätestens dann wäre dir alles um die Ohren geflogen, wenn du das <p>-Element nicht automatisch so groß gemacht hättest, dass es weiterhin unterhalb des Formulars sich ausstreckt.

Code

<style>
div#loginForm form{
 display:none;
}


div#loginForm:hover form{
 display:block;
}
</style>




<div id="loginForm">
 <p>Login</p>
 <form method="post" action="./">
  Nutzername:
  <input name="username" type="text" />


  Passwort:
  <input name="passw" type="password" />




  <input name="login" type="submit" value="Anmelden" />
 </form>
</div>

Alles anzeigen

Zusammenfassung: Deine Logik ist vom Ansatz her schon falsch und welche Version Du vom Chrome auch immer nutzen magst, sie zeigt es falsch an.

Das Firefox den Hover abbricht, wenn man in das Dropdown-Menu für die Auswahl der Autovervollständigung geht, ist ärgerlich aber nicht änderbar.

martinw1986

Siehe:

http://www.be-a-wolff.org/test.php

Da kann man es sich anschauen. Einfach über Login fahren und das Formular kommt. Wenn man dann etwas eingeben möchte und mit der Maus auf die von FF bereitgestellte Liste der Autovervollständigung geht verschwindet das Formular wieder.

Solange die Maus auf dem div ist fliegt mir gar nix um die Ohren ... das funktioniert alles Tadellos ... und ist CSS 2.0 Normenkonform ...

Und in meinem Iron verschwindet das Formular nicht wenn ich mit der Maus über der Autovervollständigung bin ...

bugcatcher

In dem Testcase gehts, wenn du einfach nur deine gelieferten Quelltexte zusammenklebst nicht.

Warum dein Testcase geht, kann ich mir aber beim besten Willen nicht erklären. Ich kann die Logik nach der das funktionieren soll nicht finden. Warum der das <div> noch anzeigt, obwohl du mit der Maus das <p>-Element verlassen hast, ist mir ein Rätsel. Würde ich als Fehlinterpretation auslegen.

Das mit der Autovervollständigung hingegen ist korrekt. Da wirst du auch nicht viel machen können. Evtl. hilft hier eine Bugzilla-Meldung bei Mozilla, um das Problem zukünftig zu umgehen.

Shiek

So funktioniert es bei mir:

Code

<head>
<link rel="stylesheet" type="text/css" href="style.css">
<div id='login'>
<div id='test'>
  <p id='loginText'>
   Login
  </p>
  <div id='loginForm'>
   <form method='post'>
    Nutzername:
    <input name='username' type='text' />


    Passwort:
    <input name='passw' type='password' />




    <input name='login' type='submit' value='Anmelden' />
   </form>
  </div>
</div>
</div>
</head>

Alles anzeigen

Hatte mich schon gefragt, wie du die css-file eingebunden hast, oder du hast nur einen Teil des codes gepostet. In dem Fall habe ich die css-file "style.css" genannt.

bugcatcher

Was funktioniert? Wenn ich das so zusammen baue, dann blendet sich das Login-Formular ein, wenn ich mit der Maus über das <p>-Element gehe und es verschwindet sobald ich das <p>-Element wieder verlasse (was nach Logik auch völlig korrekt ist). In die Forumarfelder komm ich dabei natürlich nicht und auch nicht bis zur Autovervollständigung.

Shiek

Klar, mit tab. So kannst du auch die Autovervollständigung benutzen.

martinw1986

bugcatcher ich weiß nicht was du mit dem <p> hast, das is vollkommen unerheblich.

Die Sache läuft so ab das sich das Hover Event auf das <div> #login bezieht.

Ein Teil dieses <div> ist nicht sichtbar, der Teil #loginForm. Greift aber der Hover Effekt wird die Eigenschaft visibility von #loginForm geändert sodass es sichtbar ist.

Wie gesagt CSS Validator des allmächtigen W3C sieht darin keinen Fehler.

Aber das ich wegen der Autovervollständigung nix machen kann is echt shice :-/

Trotzdem danke fürs angucken

bugcatcher

Arg. Mein Fehler. Da hatte ich schon in meiner Version umgestellt gehabt und daher was durch einander gebracht. Wohl zu heiß heute für mich. Ich spreche nicht vom <p> sondern vom <div id="login">. Die Aussage bleibt aber die selbe.

Dein Quelltext-Testcase geht nicht, weil Du das position:absolute; drin hast und daher sich das <div id='login'> Element nicht um die Höhe des Formulars ausdehnt (einfach mal #login mit background-color einfärben, dann siehst du was ich meine). Entfernt man das, funktioniert es, weil sich der #login-Bereich ausbreitet. Kannst du gerne mal testen:

Code

<style>
#login{
 background-color:red;
}
 
#login:hover div {
visibility: visible;
}

#loginForm {
visibility: hidden;
position:absolute; /* einmal so testen und einmal position auskommentieren */
width: 150px;
padding: 5px;
text-align: left;
}
</style>


<div id='login'>
<div id='test'>
  <p id='loginText'>
   Login
  </p>
  <div id='loginForm'>
   <form method='post'>
    Nutzername:
    <input name='username' type='text' />


    Passwort:
    <input name='passw' type='password' />




    <input name='login' type='submit' value='Anmelden' />
   </form>
  </div>
</div>
</div>

Alles anzeigen

Einfach als eine HTML-Seite abspeichern und einmal mit und einmal ohne position:absolute testen.

Übrigens testen Validatoren nur ob die "Rechtschreibung" und "Grammatik" korrekt sind. Sinnhaftigkeit und Logik prüfen sie nicht.

Shiek

Zitat von martinw1986

Wenn ich nun das Formular nutze und Firefox mir per Autovervollständigung Möglichkeiten anbietet und ich mit der Maus über die Autovervollständigung gehe, verschwindet der Container wieder, da wohl der Hover Effekt nicht mehr aktiv ist.

Naja, du kannst entweder mit der Tastatur durch das Formular navigieren (da brauchst du die Maus nicht), oder du musst die div-Box erweitern, denn deine Eingabefelder bleiben nur solange eingeblendet solange du dich auch mit der Maus auf der div-Box befindest, welche übrigens über den gesamten Bildschirm geht, ist mir grade aufgefallen (das Formular erscheint auch, wenn du ganz oben rechts mit der Maus bist). Ich würde einfach eine div-Box in einer anderen machen und den hover-Effekt auf die, die um den Eingabedialog liegt.

bugcatcher

Der Hover-Effekt endet, sobald man mit der Maus in die Dropdown-Liste der Autovervollständigung wechselt. Egal wie groß die Box ist.

martinw1986

O.o

Ich weiß nicht was Ihr wollt, das mit dem Hover funktioniert vollständig ohne Probleme in allen großen Browsern.

Das einzige was nicht geht ist das mit der Autovervollständigung was wohl aber daran liegt das der Hover Effekt nicht mehr greift, wie schon erwähnt wurde.

Und natürlich dehnt sich #login nicht aus ... das ist ja auch der Sinn. Wenn sich Login ausdehnen würde so das es #loginForm umschliesst, dann würde es darunterliegenden Content verschieben was ja nicht Sinn und Zweck der Sache ist.

Shiek

Ich hab schon verstanden, was du meinst^^ Es funktioniert ja auch bei mir. Das Komische ist nur: die Autovervollständigung geht bei mir auch, aber vielleicht reden wir ja wieder aneinander vorbei

bugcatcher

Okay. Ich hol noch ein letztes mal aus.... Es geht dabei nicht um die Autovervollständigung.

Dein online-Testcase geht. Und ich hab nicht den Hauch einer Ahnung warum (Edit: inzwischen einen Ansatzpunkt, siehe nächstes Posting). Den Quelltext den Du uns zuerst bereitgestellt hast, funktioniert nicht. Beweis: http://public.pixellion.de/hover-test.html

Das "nicht funktionieren" ist hierbei logisch absolut korrekt. Dein online-Testcase verhält sich (in meinen Augen) unlogisch, sprich falsch.

Begründung für meine Aussage bezüglich der Logik meinerseits: Wie Du in meinem Testcase sehen kannst, ist das #login-Element eingefärbt. Laut CSS-Vorgaben darf das Hover nur dann auslösen, solange die Maus innerhalb des Elements bleibt. Sobald man den Roten bereich verlässt, muss der Hover beendet werden. In diesem Testcase wird das auch korrekt eingehalten. Erst wenn man das position:absolute aus dem #loginForm-Element raus nimmt (siehe Testcase 2, kann das #login-Element die größe annehmen, die es braucht, um auch dann noch den Hover auszulösen, wenn die Maus über dem #loginForm-Element verweilt.

In deinem online-Testcase verlässt die Maus aber das #login-Element und der #loginForm-Bereich bleibt trotzdem sichbar. Das ist nach CSS-Vorgaben aber falsch! Es funktioniert zwar wie gewünscht, dass Verhalten entspricht aber nicht den Vorgaben.

Jetzt meine Verwunderung/Kritik verstanden?

Edit: um den Effekt der Nichtverdrängung anderer Elemente zu erreichen geht man so vor: http://public.pixellion.de/hover-test-3.html

Zitat von Shiek

Das Komische ist nur: die Autovervollständigung geht bei mir auch

Also sobald ich mit der Maus über die Auswahlliste der Autovervollständigung gehe, geht der Hovereffekt verloren (die Liste bleibt und ich ich kann auch was auswählen und dann einfügen, aber das Einblenden des Formulars wird beendet). Hab ich auf zwei XP-Kisten getestet. Benutzt du ein anderes OS vielleicht?

Shiek

Ja, nun weiß ich was du meinst. Die Idee mit dem einfärben ist echt gut. Daher hatte ich ja auch schon gemeint, dass man eine div-Box in einer div-Box machen könnte oder anders: 2 div-Boxen untereinander (So ist es nämlich im online-Beispiel gemacht wurden). Das Eingabeformular verschwindet nicht, weil die div-Box nicht nur so tief wie der Text ist, sondern bis an das Eingabeformular selbst reicht. Daher funktioniert es beim online-Beispiel.
Weißt du nun was ich meine?

Der TO hat aber ein anderes Problem wie ich herauslesen konnte. Wenn die Autovervollständigung nicht funktioniert, liegt das aber nicht am html-Code oder an der css-file, denn bei mir funktioniert es.