CSS-Code greift nach JavaScript-Manipulation nicht mehr

[K.Beutler]

Hallo,

ich arbeite gerade an der Menüleiste meines Programms und die Darstellung, das Aufklappen beim Hover sowie die Hover-Effekte funktionieren alle super!
Hier kurz der CSS-Code:

    #gui_menu
      {
        position:absolute;
        top: 0;
        left:0;
        z-index:2;
        width:auto;
        height:25px;
        background-color:#1B1B1B;
        overflow:visible;
      }

        #gui_menu ul
    {
          text-align:center;
          list-style:none;
          height:100%;
    }

      #gui_menu ul li.group_item
      {
        float:left;
        border:1px solid green;
      }

      #gui_menu ul li
      {
            position:relative;
            height:15px;
            font-weight:bold;
            font-size:0.9em;
            padding:5px 10px;
            cursor: pointer;
      }

      #gui_menu ul li:hover
      {
          background-color:#555;
      }

        #gui_menu ul li ul
        {
          position: absolute;
          top:25px;
          left:0;
          width:150px;
          display:none;
          text-align:left;
        }

        #gui_menu ul li:hover ul
        {
              display:block;
        }

        #gui_menu ul li ul li
        {
              background:#555;
              display:block;
        }

          #gui_menu ul li ul li:hover
          {
            background-color:#666;
          }



      #gui_menu a
      {
          text-decoration:none;
          color: #FFFFFF;
      }

Der Knackpunkt ist der HOVER-Effekt, der die verschachtelten Listen anzeigen lässt ("display:block").

Wenn ich in meinem Script das gewählte Listen-Item per onClick --> JavaScript-Funktion abfangen und bearbeiten will, soll die Navigation natürlich sofort nach dem Klick-Event wieder schließen --> das manage ich dann per JS :

element.style.display = "none";

Das Problem ist nur, dass ich damit irgendwie die CSS-Eigenschaften für dieses Element für immer überschreibe, sprich beim nächsten HOVER wird die verschachtelte Liste nicht mehr ausgeklappt ("display:block")... Woran liegt das bzw. wie kann ich dem Abhilfe schaffen? Es wäre wirklich sehr mühseelig, alles per JS nochmal zu definieren und dann nur noch mit JS-Events (onMouseOver/onMouseOut) zu arbeiten....

Gibts da ne Lösung?


EDIT:
Habe das Problem selbst gefunden. Bei der Style-Manipulation via JS werden die neuen Styles eben direkt ins HTML-Element-Tag importiert und überschreiben somit logischerweise alle untergeordneten CSS-Blöcke...

Ich löse das Problem nun durch Manipulation der Listen-Klasse, indem ich eine Klasse "expand" definiere und beim MouseOver-Event jeder Unterliste diese Klasse zuordne.. Ist nicht die schönste Art und Weise, aber offensichtlich effektiv.

Was mir dabei jedoch aufgefallen ist ist ein nerviges Flackern des Cursors zwischen Default und Pointer, während ich die Maus über das expandierte Element bewege, solange ich gleichzeitig ein MouseOut-Event verwende, welche die "expand"-Klasse wieder entfernt...
Kann man das irgendwie beheben?

 

[pax]

Ist nicht die schönste Art und Weise, aber offensichtlich effektiv.

Ist auf jeden Fall sehr viel besser als den Style direkt zu setzten.

Was mir dabei jedoch aufgefallen ist ist ein nerviges Flackern des Cursors zwischen Default und Pointer,

Klingt so, als würdest du bei jedem Mouseoverevent die Klassen setzen. Mach mal eine Prüfung davor, ob sie schon gesetzt sind (oder besser: setze eine Variable, die den Zustand anzeigt), das Mouseoverevent feuert ein paar 100 mal in der Sekunde, wenn du die Maus bewegst.
Ansonsten schau mal, ob wirklich alle Zustände die vorkommen können mit cursor: pointer abgedeckt sind.

 

[K.Beutler]

Ist auf jeden Fall sehr viel besser als den Style direkt zu setzten.


Klingt so, als würdest du bei jedem Mouseoverevent die Klassen setzen. Mach mal eine Prüfung davor, ob sie schon gesetzt sind (oder besser: setze eine Variable, die den Zustand anzeigt), das Mouseoverevent feuert ein paar 100 mal in der Sekunde, wenn du die Maus bewegst.
Ansonsten schau mal, ob wirklich alle Zustände die vorkommen können mit cursor: pointer abgedeckt sind.

Guter Einwand, du hast recht. Hab das jetzt korrigiert et voila, alles läuft super!

Vielen Dank!