Sorgenkind Mech: hover für eigene klasse

moins

ich versuche gerade folgendes: es gibt eine klasse namens .data, die wie folgt aussieht:
.data {
 cursor: default;
}

ich möchte jetzt, dass wenn man mit der maus über das element fährt sich der hintergrund ändert

mein versuch:
data:hover {
 background-color: #CCCCCC;
}

(mit und ohne punkt vor data)

es funktioniert aber nich

kann mir jemand sagen, wie man das macht?

vielen dank im vorraus ;)

gruß

  1. Hi,

    mein versuch:
    data:hover {

    leider ist HTML ein <data>-Element unbekannt.

    (mit und ohne punkt vor data)

    Nicht raten. Der Punkt besagt, dass es sich um eine Klasse handelt.

    es funktioniert aber nich

    Was bedeutet "es funktioniert nicht"? Falls Du damit meinst, dass der IE nicht darauf reagiert, solltest Du es statt dessen mal in einem Browser testen.

    Cheatah

    --
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. leider ist HTML ein <data>-Element unbekannt.

      es soll ja auch unabhängig von einem html-element sein

      sprich jedes html-element mit der klasse data soll bei hover andere eigenschaften haben

      Was bedeutet "es funktioniert nicht"? Falls Du damit meinst, dass der IE nicht darauf reagiert, solltest Du es statt dessen mal in einem Browser testen.

      heißt es sonst nicht immer "eine seite muss für jeden browser funktionieren?"

      wie genau kann ich das machen?

      ich mein zur not muss ich das mit js machen aber da weiß ich nicht, wie ich eine klasse zuweisen kann ... mit this.class schonmal nich, soviel weiß ich

      gruß

      1. Hi,

        leider ist HTML ein <data>-Element unbekannt.
        es soll ja auch unabhängig von einem html-element sein
        sprich jedes html-element mit der klasse data soll bei hover andere eigenschaften haben

        ich habe "simuliert", wie ein CSS-tauglicher Client Deinen Code interpretieren wird.

        Was bedeutet "es funktioniert nicht"? Falls Du damit meinst, dass der IE nicht darauf reagiert, solltest Du es statt dessen mal in einem Browser testen.
        heißt es sonst nicht immer "eine seite muss für jeden browser funktionieren?"

        Natürlich. Und ebenso oft heißt es, dass es bei CSS überhaupt nichts macht, wenn ein Browser es nicht beherrscht - so wurde es designed. Der Browser zeigt es dann anders an, was man zu beachten hat, mehr nicht. Die Funktionalität ist nicht eingeschränkt.

        wie genau kann ich das machen?

        Wie genau kannst Du was machen?

        ich mein zur not muss ich das mit js machen

        Dann "funktioniert" es auf noch weniger Browsern, und im schlimmsten Fall verursachst Du Fehlermeldungen; _dann_ ist die Funktionalität in der Tat eingeschränkt.

        aber da weiß ich nicht, wie ich eine klasse zuweisen kann ... mit this.class schonmal nich, soviel weiß ich

        Mit DOM-Mitteln ist das kein Thema. Aber warum nicht bei CSS bleiben?

        Cheatah

        --
        X-Will-Answer-Email: No
        X-Please-Search-Archive-First: Absolutely Yes
      2. Hi,

        leider ist HTML ein <data>-Element unbekannt.

        es soll ja auch unabhängig von einem html-element sein

        sprich jedes html-element mit der klasse data soll bei hover andere eigenschaften haben

        kann es sein, daß Dir die Syntax von CSS noch nicht ganz klar ist?
        data {} versucht ein HTML-Element <data> anzusprechen.

        Was bedeutet "es funktioniert nicht"? Falls Du damit meinst, dass der IE nicht darauf reagiert, solltest Du es statt dessen mal in einem Browser testen.

        heißt es sonst nicht immer "eine seite muss für jeden browser funktionieren?"

        Sicherlich. Deshalb wird es Dir wenig helfen zu sehen, daß es z.B. im Mozilla funktioniert.
        Um das für den IE umzusetzen, mußt Du ihm einen Link anbieten und diesen formatieren, also a.data:hover {}.
        Wenn der Link eine bestimmte Größe haben soll, müßtest Du a.data noch mit display:block definieren.

        freundliche Grüße
        Ingo

  2. Wenn das eine Schaltfläche ist, dann teste mal das:

    a.data:hover   { color:#FFFF00;
                     background-color:#0000FF;
                     text-decoration:none;
                     border-bottom: medium solid #0000FF;}

    <a class="data" ......> ...... </a>

    hover geht meines Wissens nach nur bei Links.

    oder wenn es eine Tabelle ist:

    <tr onMouseOver="this.bgColor='lightblue'" onMouseOut="this.bgColor='white'" >

    Hier wird die ganze Zeile einer Tabelle eingefärbt.

    Müsste aber auch bei anderen Objekten funzen.

    1. Hi,

      hover geht meines Wissens nach nur bei Links.

      dem war in CSS/1.0 so. Seit Mai 1998 gibt es aber CSS/2.0, welches diese Pseudoklasse für alle Elemente definiert.

      <tr onMouseOver="this.bgColor='lightblue'" onMouseOut="this.bgColor='white'" >

      Wozu um alles in der Welt JavaScript?

      Cheatah

      --
      X-Will-Answer-Email: No
      X-Please-Search-Archive-First: Absolutely Yes