Grundsatzfrage: Text-Hover mit CSS oder JavaScript?

[gaby]

Moin, moin,

Würdet ihr folgende Aufgabe eher mit CSS oder JavaScript lösen?

http://gaby77.ga.funpic.de/forum/fr/text-hover/mit_css_und_link.html

Grundsätzlich bin ich erstmal für eine CSS-Lösung, wenn es um hover geht.
Das Problem ist natürlich wieder mal der IE-6, weil er nur a-Elemente hovern kann.
Also habe ich mir damit "beholfen", daß ich aus dem Textabschnitt, der gehovert werden soll, einen Link gemacht habe.
Wenn man mal außer acht läßt, daß so ein "Workaround" nicht gerade semantischen Code beinhaltet (der Link ist ja eigentlich überflüssig), finde ich es immer noch besser, als eine JavaScript-Lösung, bei der ein Teil der Besucher ausgeschlossen wird.

Was haltet ihr denn für die bessere Lösung?

Grüße
gaby

[Gunnar Bittersmann]

Hello out there!

Grundsätzlich bin ich erstmal für eine CSS-Lösung, wenn es um hover geht.
Das Problem ist natürlich wieder mal der IE-6, weil er nur a-Elemente hovern kann.

Was spricht gegen die CSS-Lösung und einem JavaScript nur für IE?

See ya up the road,
Gunnar

[gaby]

Hi,

Was spricht gegen die CSS-Lösung

Gegen _meine_ CSS-Lösung?
... die strengen Semantikwächter.
In diesem Zusammenhang ist ein Link oder Anker nunmal überflüssig. ;-)

und einem JavaScript nur für IE?

Wenn ich meine CSS-Lösung nehme, dann braucht man für den IE ja kein JavaScript mehr.
Durch den (semantisch überflüssigen Link) funktioniert es auch im IE mit reinem CSS.
Oder wie hast du das jetzt gemeint mit dem JavaScript?

---------------

Standardkonforme Browser brauchen nicht unbedingt den Link. Sie hovern ja auch, wenn ich 'span:hover' deklariere.

http://gaby77.ga.funpic.de/forum/fr/text-hover/mit_css_fuer_ff-1.html

Nur in diesem Fall erfüllt es nicht die Aufgabenstellung, denn bei hover soll der _Textabschnitt_ gehovert werden (aber dort nur die Worte "red", "#ff0000" und "f00" gleichzeitig (so, wie in meinem ersten Link)

Grüße
gaby

[Gunnar Bittersmann]

Hello out there!

Hi,

Was spricht gegen die CSS-Lösung

Gegen _meine_ CSS-Lösung?
... die strengen Semantikwächter.
In diesem Zusammenhang ist ein Link oder Anker nunmal überflüssig. ;-)

Nein, ich meinte: gegen die CSS-Lösung basierend auf vernünftigem Markup.

<p id="loremipsum">Lorem <span>ipsum</span> dolor </p> <span>sit</span> amet.</p>

#loremipsum span:hover {color: red}

Für alte IEs (und nur für diese) etwas JavaScript:

<!--[if lt IE 7]>  
<script type="text/javascript">  
[code lang=javascript]//<![CDATA[  
  window.onload = function ()  
  {  
    var loremipsum = document.getElementById("loremipsum");  
    var spans = loremipsum.getElementsByTagName("span");  
    for (var i = 0; i < spans.length; i++)  
    {  
      spans[i].onmouseover = function ()  
      {  
        this.style.color = "red";  
      };  
      spans[i].onmouseout = function ()  
      {  
        this.style.color = "";  
      };  
    }  
  };  
//]]>

</script>
<![endif]-->[/code]

See ya up the road,
Gunnar

[gaby]

Hi,

Erstmal vielen Dank, daß du dir die Mühe mit dem JavaScript gemacht hast. :-)

Was spricht gegen die CSS-Lösung

Gegen _meine_ CSS-Lösung?

Nein, ich meinte: gegen die CSS-Lösung basierend auf vernünftigem Markup.

Tja, und gerade da ist der Haken:
Mit vernünftigem Markup bekommt man, - jedenfalls ich, - das gewünschte Ergebnis css-mäßig nicht hin.
Schau mal bei meinem Link im ersten Posting. So soll das Mausover funktionieren.

http://gaby77.ga.funpic.de/forum/fr/text-hover/mit_css_und_link.html

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.

Bei deiner Lösung, und meinem eigenen Versuch mit vernünftigem Markup

http://gaby77.ga.funpic.de/forum/fr/text-hover/mit_css_fuer_ff-1.html

wird immer nur das eine Wort gefärbt, auf dem die Maus gerade steht, aber nie die o.g. 3 Wörter ("red", und  "#FF0000" und "F00") _gleichzeitig_.

Wenn man jetzt davon ausgeht, daß es keine CSS-Lösung mit _vernünftigem_ Markup gibt, und erst recht keine, die auch den IE-6 einschließt, was haltet ihr unter diesen Umständen für das kleinere Übel:

Meine erste Version mit dem überflüssigen, aber funktionierenden Link, oder eine JS-Version, bei der man sich bei der Erstellung wahrscheinlich einen abbrechen muß *g*, mal ganz abgesehen davon, daß ein JS-Hover nicht immer funktioniert?

Grüße
gaby

PS:
Falls jemandem doch noch eine vernünftige CSS-Lösung einfällt, nur her damit. ;-)

[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

[gaby]

Hi,

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'.

Das isses! danke Gunnar.  :-)

Darauf hätte ich eigentlich auch kommen müssen, aber manchmal hat man halt ein Brett vorm Kopf.
*schäm*

Grüße
gaby

[gaby]

Nachtrag

Hi nochmal,

Aus deinem Posting leite ich dann mal die Antwort auf meine Frage ab:

Text-Hover lieber mit sinnvollem Markup für standardkonforme Browser, einem JavaScript für den IE, und User mit deaktiviertem JS im IE haben halt Pech gehabt, richtig?  ;-)

Grüße
gaby

[steckl]

Hi,

Was haltet ihr denn für die bessere Lösung?

Ich denke so ist es besser wie mit JS.

Jedoch sehe ich einen kleinen Nachteil an deiner Loesung darin, dass die Seite nach oben scrollt (wegen href="#"), wenn man auf den Link klickt.
Aber im IE 6 gibt es wohl keinen hover-Effekt, wenn man das href-Attribut weglaesst.

Du koenntest dem Link einen Anker zuweisen, auf den du dann verweist. Wobei ich mir selbst nicht sicher bin, was besser ist.

Vielleicht auch noch zusaetzlich ein onclick="return false;" angeben.

mfG,
steckl

[gaby]

Hi,

Jedoch sehe ich einen kleinen Nachteil an deiner Loesung darin, dass die Seite nach oben scrollt (wegen href="#"), wenn man auf den Link klickt.

Ein guter Einwand, danke. :-)

so dürfte das Problem behoben werden:

<a name="hilfsanker"></a>
<p>Beispiel: für ROT kann <a href="#hilfsanker"><span>red</span> oder <span>#FF0000</span> oder <span>#F00</span></a> geschrieben werden.</p>

Aber im IE 6 gibt es wohl keinen hover-Effekt, wenn man das href-Attribut weglaesst.

Ich wüßte jedenfalls keine andere Lösung mit CSS.

Grüße
gaby

[Cheatah]

Hi,

so dürfte das Problem behoben werden:

nein, nur verschoben.

Cheatah

[gaby]

Hi,

so dürfte das Problem behoben werden:

nein, nur verschoben.

Nach meinen Tests scrollt der Text nun nicht mehr nach oben, wenn man auf den Link, bzw den Anker klickt.

http://gaby77.ga.funpic.de/forum/fr/text-hover/mit_css_und_anker.html

Grüße
gaby

[Cheatah]

Hi,

Nach meinen Tests scrollt der Text nun nicht mehr nach oben, wenn man auf den Link, bzw den Anker klickt.

nach meinen Tests scrollt der Text nun aber nach _unten_. Bedenke, dass Deine beispielhafte Lösung vermutlich in einem größeren Kontext eingesetzt werden würde.

http://gaby77.ga.funpic.de/forum/fr/text-hover/mit_css_und_anker.html

http://forum.de.selfhtml.org/hilfe/bedienung.htm#verweise-einbinden, danke.

Cheatah

[steckl]

Hi,

so dürfte das Problem behoben werden:

<a name="hilfsanker"></a>
<p>Beispiel: für ROT kann <a href="#hilfsanker"><span>red</span> oder <span>#FF0000</span> oder <span>#F00</span></a> geschrieben werden.</p>

So verwendest du einen Zweiten Link, der eigentlich keiner ist. Es wuerde auch gehen, wenn du dem bereits vorhanden Link einen Namen (bzw. eine ID) zuweist, auf den du dann verweist.

mfG,
steckl