Mathias Brodala: MouseOver in Tabellenspalte

Beitrag lesen

Hallo Frank.

  1. ich würde gerne den "MouseOver-Effekt" nutzen und die Hintergrundfarbe der gesamten Zeile ändern, wenn ich mit der Maus in die Zeile gehe.

Dann setze diesen Hover-Effekt […] mit JavaScript [um].

Könntest Du da ein kleines Beispiel nennen? Würde mir bestimmt deutlich leichter fallen :-)

Kein Problem. Das CSS:

.hovered {  
  background:#069;  
}

Das JavaScript:

// Erst nach dem Laden kann auf Elemente im Dokument zugegriffen werden  
window.onload = function() {  
  
  // Erste Tabelle im Dokument  
  var table = document.getElementsByTagName('table')[0];  
  
  // Alle Zeilen dieser Tabelle durchlaufen  
  for (var i = 0; i < table.rows.length; ++i) {  
  
    // Funktion für onmouseover-Event festlegen  
    table.rows[i].onmouseover = function() {  
  
      // Tabellenzeile der Klasse „hovered“ hinzufügen  
      this.className = 'hovered';  
    };  
  
    // Funktion für onmouseout-Event festlegen  
    table.rows[i].onmouseout = function() {  
  
      // Klassenzugehörigkeit der Tabellenzeile löschen  
      this.className = '';  
    };  
  }  
};

Einen schönen Samstag noch.

Gruß, Mathias

--
ie:% fl:| br:< va:) ls:& fo:) rl:( n4:~ ss:) de:] js:| mo:| zu:)
debian/rules