Grundsatzfrage: Text-Hover mit CSS oder JavaScript?

[Gunnar Bittersmann]

Hello out there!

Laut Aufgabenstellung soll der Textblock, in dem gehovert wird, alle Wörter zwischen "red" und "#F00" einschließen.
Wird nun dieser Textblock gehovert, (egal, an welcher Stelle innerhalb dieses Blocks), dann sollen die Wörter "red", und  "#FF0000" und "F00" gleichzeitig rot gefärbt werden.

Ach so. Dann musst die Pseudoklasse ':hover' natürlich nicht bei den einzelnen 'span'-Elemente anwenden, sondern bei dem des Textblocks. Die zu Stellen mit Farbveränderung selektierst du mit dem Nachfahrenselektor. In meinem Beispiel also '#loremipsum:hover span'.

Im Script entsprechend 'onmouseover'/'onmouseout' nicht für die 'span'-Elemente, sondern für 'loremipsum'. Die Farbangaben natürlich dennoch nur für die 'span'-Elemente:

  window.onload = function ()  
  {  
    var loremipsum = document.getElementById("loremipsum");  
    var spans = loremipsum.getElementsByTagName("span");  
  
    loremipsum.onmouseover = function ()  
    {  
      for (var i = 0; i < spans.length; i++)  
      {  
        spans[i].style.color = "red";  
      }  
    };  
  
    loremipsum.onmouseout = function ()  
    {  
      for (var i = 0; i < spans.length; i++)  
      {  
        spans[i].style.color = "";  
      }  
    };  
  };

See ya up the road,
Gunnar