CSS-Klasse ändern bei OnMouseOver

[remuen]

Hallo

Kann ich nur mit CSS (d.h. ohne JavaScript etc) ein Tabellenfeld bei einem OnMouseOver anders einfärben, d.h. dem Feld bei OnMouseOver eine andere CSS-Klasse zuordnen? (Ein weisses Tabellenfeld sollte sich blau einfärben, wenn ich mit der Maus darüber fahre).

Mit JavaScript habe ich nachstehende Lösung gefunden, jedoch möchte ich auf meiner Seite nach Möglichkeit kein JS einsetzen.

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
   var Auswahl, obj;
   var aktButton=1;
   function Schalter(Nr)
      {
        if (document.getElementById)
        {
          Auswahl="Button"+aktButton;
          obj=document.getElementById(Auswahl);
          if (obj.className) {obj.className="tabformatwhite";}
          Auswahl="Button"+Nr;
          obj=document.getElementById(Auswahl);
          if (obj.className) {obj.className="tabformatblue";}
          aktButton=Nr;
        }

if (document.all && !document.getElementById)
        {
          Auswahl="Button"+aktButton;
          obj=document.all[Auswahl];
          if (obj.className) {obj.className="tabformatwhite";}
          Auswahl="Button"+Nr;
          obj=document.all[Auswahl];
          if (obj.className) {obj.className="tabformatblue";}
          aktButton=Nr;
        }
      }
      //-->
</SCRIPT>

Vielen Dank für Eure Hilfe.

René

[Gunther]

Hallo René,

Kann ich nur mit CSS (d.h. ohne JavaScript etc) ein Tabellenfeld bei einem OnMouseOver anders einfärben, d.h. dem Feld bei OnMouseOver eine andere CSS-Klasse zuordnen? (Ein weisses Tabellenfeld sollte sich blau einfärben, wenn ich mit der Maus darüber fahre).

also die Event-Handler an sich gehören zwar mittlerweile auch zum HTML-Sprachstandard, kommen aber ursprünglich vom JavaScript her (als Möglichkeit, um auf Anwender-Ereignisse reagieren zu können).

Daher macht ihre Verwendung auch nur in Kombination mit Javascript Sinn, denn jede 'ausgelöste' Aktion wird immer eine Javascript-Aktion sein. Also: kein Javascript -> kein Event-Handler!

Wenn es dir nur darum geht, den Zellenhintergrund anders zu färben, kannst du das auch einfacher machen:

<td onmouseover="this.style.backgroundColor='#000066';" onmouseout="this.style.backgroundColor='#ffffff';">

Gruß Gunther

[remuen]

Hallo Gunther

Wenn es dir nur darum geht, den Zellenhintergrund anders zu färben, kannst du das auch einfacher machen:

<td onmouseover="this.style.backgroundColor='#000066';" onmouseout="this.style.backgroundColor='#ffffff';">

Ist genau was ich gesucht habe. Danke vielmals!

Gruss

René

[Herbalizer]

Hi!

Kann ich nur mit CSS (d.h. ohne JavaScript etc) ein Tabellenfeld bei einem OnMouseOver anders einfärben, d.h. dem Feld bei OnMouseOver eine andere CSS-Klasse zuordnen? (Ein weisses Tabellenfeld sollte sich blau einfärben, wenn ich mit der Maus darüber fahre).

Die Klasse kannst du nicht ändern. Aber du kannst die Pseudoklasse :hover benutzen:

td {background:white}
td:hover {background:blue}

Haken an der Sache: dem IE gehts am Allerwertesten vorbei, wenn ich mich nicht irre.

Gruß Herbalizer

[remuen]

Hallo Herbalizer

Danke für diesen zusätzlichen Input. Das wär eigentlich noch näher an der gesuchten Lösung, wenn .... ja, wenn der IE damit etwas anfangen könnte (hab's schnell ausprobiert). Aber da doch so an die 90% der Besucher meiner Site den IE benutzen, kann ich die wohl kaum einfach so übergehen *g*

Viele Grüsse aus der sonnigen und warmen Schweiz (Schnee gibt's noch genügend in/auf den Bergen)
René

[remuen]

Hallo zusammen

Da es mir bei der gesuchten Lösung darum geht, einen Button für einen Verweis zu "simulieren", habe ich in der Zwischenzeit noch etwas weiter gesucht und auch eine Lösung gefunden, die genau das macht, was ich will. Hätte ich meine Frage hier etwas konkreter gestellt, hätte ich mir wohl diese Sucherei erspart. Ok, ich poste die Lösung nun hier, obwohl ja kaum jemand mehr diesen Thread lesen wird *g* - aber sie ist dann mindestens auch im Archiv verewigt und lässt sich dort noch finden. Also, der Ansatz ist, Hyperlinks als Blockelemente zu verwenden. Details siehe hier:

http://www.css4you.pehlgrim.de/trickkiste/tr00023.php

Gruss
René

[MudGuard]

Hi,

Da es mir bei der gesuchten Lösung darum geht, einen Button für einen Verweis zu "simulieren",

Wenn Du einen Button für einen Link haben willst, warum benutzt Du dann nicht einen Button?

<form action="http://www.example.org/Deine/Seite.html" method="get">
<div><input type="submit" value="Klick mich"></div>
</form>

(statt <input type="submit"> kann es natürlich auch <button type="submit"> sein)

cu,
Andreas

[remuen]

Hallo Andreas

Wenn Du einen Button für einen Link haben willst, warum benutzt Du dann nicht einen Button?

Weil ich sowas ähnliches realisieren will wie Du auf Deiner Sitemap *g* Siehe Navigationsmenü auf meiner Site http://www.nak-badragaz.ch, bei dem das ganze Feld bei Überfahren eigentlich weiss werden sollte, was nun mit dem Link als Blockelement auch funktionieren wird. Scheint, dass ich mir dann gleich auch die Tabelle für die Links sparen kann.

Trotzdem Danke, als Anfänger bin ich immer für jeden Tipp dankbar.

Gruss

René