JavaScript Hoverfarbe von Links lässt sich nicht ändern

Mr. Snoot · 19. März 2009

Hü,

ich habe jetzt endlich mein Suggest-Script fertig geklöppelt und es funktioniert nahezu alles so wie es soll. Nur ein Problem gibt's noch.

Die vorgeschlagenen Worte sind jeweils Links, die ich mit CSS formatiert habe (Hovereffekt usw.). Standardschriftfarbe ist Schwarz, Hoverfarben sind Weiß (Schrift) und Blau (Hintergrund). Zumindest was die Auswahl mit der Maus betrifft.

Wenn man die Vorschläge mit der Tastatur auswählt (Pfeiltaste rauf/runter), dann wird zwar die Hintergrundfarbe korrekt übernommen, aber die Schriftfarbe nicht. Scheinbar hat man mit JS auch keinen Einfluss auf die Hoverschriftfarbe alleine, sondern nur allgemein auf die Schriftfarbe (style.color), damit lässt sich aber wohl die via CSS eingestellte Standardfarbe nicht überschreiben, so dass die Schrift also immer schwarz ist und bei der Auswahl nicht weiß wird.

Das Script für die Tastennavigation bzw. die Farbsettings sieht wie folgt aus (curElement.style.color = '#FFF'; hat aber eben nie eine Auswirkung):

PHP:

  function keyPressed (evt)
  {
    var curKey = evt.keyCode;

    switch (curKey)
    {
      case 38: // hoch
      if(curElement && !curElement.previousSibling)
      {
        curElement = naviElement.lastChild.previousSibling;
        document.getElementById(txt_id).value = curElement.firstChild.id;
        curElement.style.backgroundColor = '#6b91b8'; // blauer Hintergrund
        curElement.style.color = '#FFF'; // weiße Schrift

        firstElement = naviElement.firstChild;
        firstElement.style.backgroundColor = ''; // kein Hintergrund
        firstElement.style.color = '#000'; // Standardfabre
      }
      else if(curElement && curElement.previousSibling)
      {
        curElement = curElement.previousSibling;
        document.getElementById(txt_id).value = curElement.firstChild.id;
        curElement.style.backgroundColor = '#6b91b8'; // blauer Hintergrund
        curElement.style.color = '#FFF'; // weiße Schrift

        if(curElement.nextSibling)
        {
          curElement.nextSibling.style.color = '#000'; // Standardfabre
          curElement.nextSibling.style.backgroundColor = ''; // kein Hintergrund
        }
      }
      else if(!curElement)
      {
        curElement = naviElement.lastChild.previousSibling;
        document.getElementById(txt_id).value = curElement.firstChild.id;
        curElement.style.backgroundColor = '#6b91b8'; // blauer Hintergrund
        curElement.style.color = '#FFF'; // weiße Schrift
      }
      break;

      case 40: // runter
      if(curElement)
      {
        if(!curElement.nextSibling.nextSibling)
        {
          curElement = naviElement.firstChild;
          document.getElementById(txt_id).value = curElement.firstChild.id;
          curElement.style.backgroundColor = '#6b91b8'; // blauer Hintergrund
          curElement.style.color = '#FFF'; // weiße Schrift

          lastElement = naviElement.lastChild.previousSibling;
          lastElement.style.backgroundColor = ''; // kein Hintergrund
          lastElement.style.color = '#000'; // Standardfabre

        }
        else if(curElement.nextSibling)
        {
          curElement = curElement.nextSibling;
          document.getElementById(txt_id).value = curElement.firstChild.id;
          curElement.style.backgroundColor = '#6b91b8'; // blauer Hintergrund
          curElement.style.color = '#FFF'; // weiße Schrift

          if(curElement.previousSibling)
          {
            curElement.previousSibling.style.color = '#000'; // Standardfabre
            curElement.previousSibling.style.backgroundColor = ''; // kein Hintergrund
          }
        }
      }
      else
      {
        curElement = naviElement.firstChild;
        document.getElementById(txt_id).value = curElement.firstChild.id;
        curElement.style.backgroundColor = '#6b91b8'; // blauer Hintergrund
        curElement.style.color = '#FFF'; // weiße Schrift
      }
      break;

      case 13: // Enter Taste
      if(curElement)
      {
        document.getElementById(div_id).style.visibility = 'hidden';
      }
      break;
      default:  return;
    }

Hat jemand eine Idee, wie man das lösen könnte?

Wie das ganze aussieht: www.halbleiter.org/suche/

Endlich die Lösung!

Angesprochen werden soll natürlich die Farbe des Links, nicht des Listenelements. Folglich wird aus

PHP:

...style.color = '#...';

PHP:

...firstChild.style.color = '#...';

agraaaaa · 15. Juni 2010

Wundert mich, dass es nicht geht.
Da du jQuery eingebunden hast, könntest du es mal direkt mit einer jQuery Methode versuchen (z.Bsp. css()). Wenn es damit auch nicht klappt, wird eventuell eine andere CSS Definition bevorzugt.
Du könntest also eine neue CSS Klasse erzeugen, welche die Hintergrund- und Textfarbinformationen beim Hover beinhaltet. Eventuell musst du die dann noch auf !important setzen. Anschließend modifizierst du deine JavaScript Funktion so, dass sie bei der Navigation die neue CSS Klasse lädt und anschließend beim Verlassen wieder entfernt.

Da der Code bei dir doch ziemlich lang und komplex ist, hab ich mir nicht alles genau angeschaut.

Suche

JavaScript Hoverfarbe von Links lässt sich nicht ändern

Mr. Snoot

Gast

agraaaaa

Ensign

Ähnliche Themen