4
Hover - Absolute Positionierung
Hallo,
ich habe ein Problem und weiß nicht genau ob es lösbar ist.
Ich habe eine DropDown Menü welches automatisch aufklappt, wenn ich per Mouseover in einem Bereich bin. Ist also ein reines CSS Menü.
In diesem aufklappt Menü befinden sich unter Punkte.
Hier ein kleines Code-Beispiel:
Bin ich nun mit der Maus über dem Link "Hauptpunkt", so klappt die UL darunter auf und ich kann innerhalb der UL navigieren. Verlasse ich den Bereich, so klappt das Menü wieder ein. Soweit passt auch alles.
Jetzt will ich aber einen Tooltipp für die Unterpunkte verwenden. Dies geht über jquery und bindet sobald ich mit der Maus über einem Unterpunkt bin ein zusätzliches DIV unter die LI ein. Beispiel:
Soweit klappt das auch. Aber bewege ich mich jetzt mit der Maus schnell nach unten, so bin ich kurze Zeit per MouseOver über dem DIV. Das DIV ist absolut positioniert. Mein UL Menü klappt ein. Und genau das will ich vermeiden. Aber ohne absolute Positionierung geht der Tooltipp nicht. Kann ich dem DIV irgendein CSS Attribut mitgeben welches mein Problem löst?
Ich hoffe ihr habt meine Problematik verstanden.
Danke
ich habe ein Problem und weiß nicht genau ob es lösbar ist.
Ich habe eine DropDown Menü welches automatisch aufklappt, wenn ich per Mouseover in einem Bereich bin. Ist also ein reines CSS Menü.
In diesem aufklappt Menü befinden sich unter Punkte.
Hier ein kleines Code-Beispiel:
<li>
<a href="#">Hauptpunkt</a>
<ul>
<li>unterpunkt</li>
<li>unterpunkt2</li>
</ul>
</li>Bin ich nun mit der Maus über dem Link "Hauptpunkt", so klappt die UL darunter auf und ich kann innerhalb der UL navigieren. Verlasse ich den Bereich, so klappt das Menü wieder ein. Soweit passt auch alles.
Jetzt will ich aber einen Tooltipp für die Unterpunkte verwenden. Dies geht über jquery und bindet sobald ich mit der Maus über einem Unterpunkt bin ein zusätzliches DIV unter die LI ein. Beispiel:
<li>
<a href="#">Hauptpunkt</a>
<ul>
<li>unterpunkt</li>
<div>Ich erscheine per MouseOver des ersten Unterpunktes</div>
<li>unterpunkt2</li>
</ul>
</li>Soweit klappt das auch. Aber bewege ich mich jetzt mit der Maus schnell nach unten, so bin ich kurze Zeit per MouseOver über dem DIV. Das DIV ist absolut positioniert. Mein UL Menü klappt ein. Und genau das will ich vermeiden. Aber ohne absolute Positionierung geht der Tooltipp nicht. Kann ich dem DIV irgendein CSS Attribut mitgeben welches mein Problem löst?
Ich hoffe ihr habt meine Problematik verstanden.
Danke
Auf Facebook teilen
Auf Twitter teilen
Auf Reddit teilen
Auf Linkedin teilenBitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben
Content-ID: 186034
Url: https://administrator.de/contentid/186034
Ausgedruckt am: 22.11.2024 um 10:11 Uhr
4 Kommentare
Neuester Kommentar
Hallo Ottscho,
ich glaube das kannst du nur unterbinden wenn das DIV als Kindelement des LIs definiert wird, so das wenn du mit dem Cursor über dem DIV bist, du auch immer noch über dem "Haupt-LI" und dem "Sub-LI" bist. Das geht aber nicht mit der absoluten Positionierung.
Alternativ das DIV weiter zur Seite verschieben so das man es nicht überfahren kann und die LIs nicht verlässt, so wird auch der zweite Link wieder sichtbar der ja von dem absolut positioniertem DIV verdeckt sein müsste !?
~Arano
ich glaube das kannst du nur unterbinden wenn das DIV als Kindelement des LIs definiert wird, so das wenn du mit dem Cursor über dem DIV bist, du auch immer noch über dem "Haupt-LI" und dem "Sub-LI" bist. Das geht aber nicht mit der absoluten Positionierung.
Alternativ das DIV weiter zur Seite verschieben so das man es nicht überfahren kann und die LIs nicht verlässt, so wird auch der zweite Link wieder sichtbar der ja von dem absolut positioniertem DIV verdeckt sein müsste !?
~Arano
Danke für deine Info.
Ohne absolute Positionierung wird es nicht einfach werden. Mal schauen ob da geht.
Daknke
ottscho
Ohne absolute Positionierung wird es nicht einfach werden. Mal schauen ob da geht.
Daknke
ottscho
Such mal bei Google nach:
css tooltip hover
Die ersten paar Links sollten schon hilfreich sein.
css tooltip hover
Die ersten paar Links sollten schon hilfreich sein.
Sorry, aber kein schöner Kommentar
1. Wird er es schon geschafft haben, da er sich seit 3 Monaten nicht gemeldet hat
2. Ist es absolut zum KOTZEN, wenn man VON Der Suche hier ins Forum kommt, zu einem Problem das hier den gleichen Titel trägt wie die eigenen Suchwörter, dann aber doch nur wieder zurück zur Suche geschickt wird *würg* weil die "Helfer" nicht mehr als "let me google that for you" drauf haben...
Entweder KANN und WILL man helfen, oder eben NICHT !
Wenn sich keiner meldet, wird der Fragende schon selber auf die Idee kommen zu suchen... und wenn nicht, dann ist es wohl auch besser so.
Die "ersten paar Links" (5) habe ich mir mal __fix__ angesehen...
So fix sagen die auch nur, dass das "Tooltip-Element" ein Kindelement des "Hover-Elements" sein sollte... aber genau DAS habe ich ja schon vor 3 Monaten geschrieben. Gut, mit der absoluten Positionierung habe ich mich wohl geirrt
Was aber fehlt ist die Kombination mit dem CSS-Menü, die hier ja zur Problembeschreibung gehört !
Davon mal abgesehen HAT der Fragesteller bereits einen Funktionierenden Tooltip
~Arano
1. Wird er es schon geschafft haben, da er sich seit 3 Monaten nicht gemeldet hat
2. Ist es absolut zum KOTZEN, wenn man VON Der Suche hier ins Forum kommt, zu einem Problem das hier den gleichen Titel trägt wie die eigenen Suchwörter, dann aber doch nur wieder zurück zur Suche geschickt wird *würg* weil die "Helfer" nicht mehr als "let me google that for you" drauf haben...
Entweder KANN und WILL man helfen, oder eben NICHT !
Wenn sich keiner meldet, wird der Fragende schon selber auf die Idee kommen zu suchen... und wenn nicht, dann ist es wohl auch besser so.
Die "ersten paar Links" (5) habe ich mir mal __fix__ angesehen...
So fix sagen die auch nur, dass das "Tooltip-Element" ein Kindelement des "Hover-Elements" sein sollte... aber genau DAS habe ich ja schon vor 3 Monaten geschrieben. Gut, mit der absoluten Positionierung habe ich mich wohl geirrt
Was aber fehlt ist die Kombination mit dem CSS-Menü, die hier ja zur Problembeschreibung gehört !
Davon mal abgesehen HAT der Fragesteller bereits einen Funktionierenden Tooltip
~Arano
