• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Hintergrundfarbe bei Klick auf Textfeld ändern

Werbung:
Werbung:
Nein es geht um eine Navigation mit einem Text.

Code: 
<div id="Navigation_Links">
  
     <ul id="nav">
       <li class="expand"> <div id="ordner">  &Uumlber das IQB </div id="ordner">
           <ul>


Code: 
#ordner:hover {
      
       color:white;background-color:#333; 
   }

Beim Überfahren mit dem Cursor wird das Feld schwarz gefärbt, aber die Farbe geht sofort wieder weg, wenn man sich nicht mehr drüber fährt.

Leider habe ich keinen Link, da ich offline daran arbeite.
Falls benötigt, kann ich den kompletten Code hochladen.

Gruß
 
Zuletzt bearbeitet:
Praktikant123 schrieb:
Nein es geht um eine Navigation mit einem Text.

Code: 
<div id="Navigation_Links">
 
     <ul id="nav">
       <li class="expand"> <div id="ordner"> &nbsp;&nbsp;&nbsp;&nbsp; &Uumlber das IQB </div id="ordner">
           <ul>


Code: 
#ordner:hover {
 
       color:white;background-color:#333;
   }

Beim Überfahren mit dem Cursor wird das Feld schwarz gefärbt, aber die Farbe geht sofort wieder weg, wenn man sich nicht mehr drüber fährt.
Zum Vergrößern anklicken....
Ist vollkommen normal, dass die :hover-Pseudoklasse ihre Gültigkeit verliert, wenn der Mauszeiger das Element wieder verlässt.

Aber vielleicht willst Du darauf hinaus, dass der Container die Formatierung behalten soll, wenn der Mauszeiger in das Submenü geführt wird: https://jsfiddle.net/spicelab/2vb5tsjq/ ?

Aus:
CSS: 
#ordner:hover {...}
wird:
CSS: 
li:hover #ordner {...}

Btw, aus </div id="ordner"> wird einfach nur </div>.
 
Werbung:
Praktikant123 schrieb:
Ja ist nicht genau das, was ich mir vorgestellt habe aber auch gut.
Danke.
Zum Vergrößern anklicken....
Steh ich gerade auf der langen Leitung, dass ich da was falsch verstanden haben sollte?

Derzeitiger Ablauf in deiner Seite:
  1. Nutzer bewegt die Maus zum Menüpunkt "XYZ". Hintergrundfarbe und Schriftfarbe ändern sich gemäß den CSS-Regeln für #ordner:hover.
  2. Nutzer klickt auf Menüpunkt "XYZ", um das versteckte Submenü einzublenden. Hintergrundfarbe und Schriftfarbe ändern sich nicht gegenüber 1., da zum Zeitpunkt des Klicks immer noch #ordner:hover greift.
  3. Nutzer bewegt die Maus in das Submenü. Hintergrundfarbe und Schriftfarbe werden jetzt wieder in den Urzustand zurückgesetzt, da #ordner:hover in diesem Moment seine Gültigkeit verloren hat.
 
Werbung:
Ja genau so ist der Ablauf. Es gefällt mir auch, aber ich wollte es anfänglich so haben, dass wenn sich das Submenü durch Klick öffnet, die Hintergrundfarbe ändert und erst bei einem Klick auf einen weiteren Menüpunkt die Hintergrundfarbe vom aktuellen wieder in den Anfangszustand ändert.
 
Hab heute Mittag den vollständigen Code Deines Fiddle-Beispiels garnicht im Detail angeschaut, Fokus lag in dem Moment nur auf'm CSS, und parallel auf dem zweiten Monitor war ich munter in Allplan zugange :D

Aber jetzt... Grundsätzlich gilt: Ein ID-Bezeichner muß im HTML-Code eindeutig sein. Multiple Angaben wie id="navigation_li" und id="ordner" sind unzulässig.

Beachte: Sobald einer dieser beiden Namen in einer JS-Funktion auftaucht, ist es mit dem ansonsten lauffähigen Script vorbei, weil es nur beim letzten Element im HTML-Code funktioniert, das diesen Namen besitzt.

In meinem nächsten Fiddle-Beispielen, zu denen ich gleich komme, habe ich mich auf das linke Menü konzentriert, und id="ordner" / #ordner in class="ordner" / .ordner umgewandelt.

Als ich eben erst realisiert habe, dass Du jQuery für das Menü einsetzt, hat's mich schon gewundert, dass Du überhaupt diese Frage (im CSS-Forum) stellen musstest.

Warum nicht einfach, wie schon für <li>, die CSS-Klasse für <div> togglen? o_O

Variante 1: https://jsfiddle.net/spicelab/3pu9joq3/
Variante 2: https://jsfiddle.net/spicelab/345unf0o/

Und noch ein Fiddle-Pro-Tipp:

Abgesehen davon, dass ich HTML- u. CSS-Code auf das linke Menü reduziert habe, vergleich den Inhalt(sumfang) unserer HTML-/JS-Codes.

Oben links kommt nur das rein, was im herkömmlichen Seitenquelltext zwischen <body></body> steht.

Unten links können JS-Bibliotheken wie jQuery über "JAVASCRIT" eingebunden werden, und <script></script> ist darin auch obsolet.

Zusätzlich können links externe Ressourcen wie z.B. das verwendete CSS-Framework Bootstrap geladen werden.
 
Hi das ist genau so wie ich es mir vorgestellt habe!
Vielen Dank, dass ist echt klasse.:eek:

ja kenne mich nicht so mit diesem Fiddle aus, habe es gestern zum ersten mal benutzt.
Außerdem suche ich mir die ganzen Bestandteile aus dem Internet und verändere sie so, wie ich mir es vorstelle. Deswegen passen vielleicht einige Stellen nicht gut aufeinander.

Aber ich muss jetzt nochmal nachfragen. Unter dem Link funktioniert alles perfekt bei mir. Wenn ich aber alles in meinen Dokumenten so abändere, passiert nicht mehr.
Ich glaube es hängt an dem script. Ich habe es im head eingefügt.

https://jsfiddle.net/2e90pzLv/

M.f.G.
 
Werbung:
Praktikant123 schrieb:
Aber ich muss jetzt nochmal nachfragen. Unter dem Link funktioniert alles perfekt bei mir. Wenn ich aber alles in meinen Dokumenten so abändere, passiert nicht mehr.
Ich glaube es hängt an dem script. Ich habe es im head eingefügt.

https://jsfiddle.net/2e90pzLv/
Zum Vergrößern anklicken....
  1. Du hast vergessen, über den "JAVASCRIPT"-Button die jQuery-Bibliothek einzubinden, und den LOAD TYPE für das Script auszuwählen. Der <script></script>-Tag wird dort nicht benötigt (siehe zum Vergleich meine Demos).
  2. Beim Kopieren meines jQuery-Scripts ist wohl was durcheinander gekommen.
Hab da mal für Ordnung gesorgt: https://jsfiddle.net/spicelab/2e90pzLv/1/
 
Es tut mir leid, aber ich bekomme es nicht hin.
Habe mal das komplette Programm hochgeladen, so kannst du sehen, ob ich die scripte richtig eingefügt habe.

Was mich nur stört ist, dass es gar keine Klasse mit Namen "ordnerOffen" gibt.

Denke, dass irgendwo hier der Fehler ist.

https://jsfiddle.net/0ojoeed9/
 
Praktikant123 schrieb:
Es tut mir leid, aber ich bekomme es nicht hin.
Habe mal das komplette Programm hochgeladen, so kannst du sehen, ob ich die scripte richtig eingefügt habe.

...

Denke, dass irgendwo hier der Fehler ist.

https://jsfiddle.net/0ojoeed9/
Zum Vergrößern anklicken....
Liest du meine Beiträge eigentlich aufmerksam zu Ende?

Du begehst jetzt zum dritten Mal dieselben Fehler... :(
Spicelab schrieb:
Und noch ein Fiddle-Pro-Tipp:

Abgesehen davon, dass ich HTML- u. CSS-Code auf das linke Menü reduziert habe, vergleich den Inhalt(sumfang) unserer HTML-/JS-Codes.

Oben links kommt nur das rein, was im herkömmlichen Seitenquelltext zwischen <body></body> steht.

Unten links können JS-Bibliotheken wie jQuery über "JAVASCRIT" eingebunden werden, und <script></script> ist darin auch obsolet.

Zusätzlich können links externe Ressourcen wie z.B. das verwendete CSS-Framework Bootstrap geladen werden.
Zum Vergrößern anklicken....
Bitte vergleiche einfach nochmal meine Fiddle-Beispiele, wo was in welchem Umfang hingehört.

Es kann nicht angehen, dass wir hier jetzt unsere Zeit damit verbringen, Deine Fiddle-Fähigkeiten zu trainieren. Das darfst Du ruhig in Eigenregie übernehmen.

http://doc.jsfiddle.net/ ist Dir dabei auch behilflich.
Praktikant123 schrieb:
Was mich nur stört ist, dass es gar keine Klasse mit Namen "ordnerOffen" gibt.
Zum Vergrößern anklicken....
Die ist doch im CSS enthalten, und mehr braucht es auch nicht, damit jQuery die Klassen .ordner u. .ordnerOffen toggeln kann.
 
Werbung:
Ja ich habe es verstanden, aber ich wollte damit ausdrücken, dass man so eventuell einfacher sieht, ob ich die Scripte an der richtigen Stelle im HTML eingefügt habe.

Danke für deine Gedult, bin noch blutiger Anfänger.

Und das mit dem ordnerOffen irritiert mich nur, weil ich keine Klasse mit diesem Namen in der HTML finden konnte.

Jedenfalls danke nochmal ich werde weiter probieren bis es klappt!

Gruß.
 
Was den aktuellen Stand Deiner Seite angeht, kann ich abschließend nur sagen, dass a) Dein ursprüngliches jQuery-Script für das Menü aus dem Quellcode entfernt werden muß, und b) mein Script in dieser Form (ohne $(document).ready(function() {}) aus dem Dokumentheader heraus an das Dokumentende vor </body> versetzt werden kann, was grundsätzlich in der Praxis auch üblich ist, JS-Code/-Dateien erst am Dokumentende aufzurufen.

Achja, und denke noch an die Umbenennung des multiplen ID-Bezeichners id="navigation_li" / #navigation_li in class="navigation_li" / .navigation_li (HTML / CSS).
 
Werbung:
Hallo

Ich finde das Beispiel nicht praxisgerecht. Bei blockiertem JavaScript kommen die Besucher überhaupt nicht an die eingeklappten Informationen. Besser wäre, wenn bei blockiertem JavaScript alle Informationen aufgeklappt sind.

Am besucherfreundlichsten und zugänglichsten wäre wenn sie überhaupt gar nicht erst versteckt werden.

Gruss

MrMurphy
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben