Benutzerdefinierte Suche

CSS-Klasse per JavaScript ansprechen?

  1. Pixelprofi

    Pixelprofi Thread StarterMacUser Mitglied

    Mitglied seit:
    08.11.2002
    Beiträge:
    410
    Zustimmungen:
    1
    Hallo,

    ich habe eine einfache Tabelle mit mehreren Zeilen und Spalten.
    Wenn man mit der Maus über eine Zeile fährt, soll sich die Hintergrundfarbe der gesamten Zeile ändern.
    Da ich die Farbangaben aber nicht in jede Zeile einzeln schreiben möchte, soll JavaScript eine CSS-Klasse ansprechen. In dieser Klasse könnte ich dann die Farbangabe global ändern.
    Weiß jemand von Euch Besserwissern ;) wie ich mit JavaScript die Klasse "over" und "out" ansprechen kann? Vielen Dank für Eure Hilfe?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    .over {
    	background-color:#ff0000;
    }
    
    .out {
    	background-color:#ffffff;
    }
    </style>
    
    </head>
    
    <body>
    <table style="border-collapse:collapse">
    	<tr onmouseover="this.style.backgroundColor='ff0000';" onmouseout="this.style.backgroundColor='#ffffff';">
    		<td width="100px" style="border:1px solid black">Text</td>
    		<td width="100px" style="border:1px solid black">Text</td>
    		<td width="100px" style="border:1px solid black">Text</td>
    		<td width="100px" style="border:1px solid black">Text</td>
    	</tr>
    	
    	<tr onmouseover="this.style.backgroundColor='ff0000';" onmouseout="this.style.backgroundColor='#ffffff';">
    		<td width="100px" style="border:1px solid black">Text</td>
    		<td width="100px" style="border:1px solid black">Text</td>
    		<td width="100px" style="border:1px solid black">Text</td>
    		<td width="100px" style="border:1px solid black">Text</td>
    	</tr>
    	
    	<tr onmouseover="this.style.backgroundColor='ff0000';" onmouseout="this.style.backgroundColor='#ffffff';">
    		<td width="100px" style="border:1px solid black">Text</td>
    		<td width="100px" style="border:1px solid black">Text</td>
    		<td width="100px" style="border:1px solid black">Text</td>
    		<td width="100px" style="border:1px solid black">Text</td>
    	</tr>
    </table>
    
    </body>
    </html>
    
     
    Pixelprofi, 14.02.2007
  2. der_Kay

    der_KayMacUser Mitglied

    Mitglied seit:
    02.09.2004
    Beiträge:
    1.685
    Zustimmungen:
    8
    HTML:
    <tr onmouseover="this.className='over';" onmouseout="this.className='out'">
    Korrekt nach W3C DOM, aber keine Ahnung, welche Browser das unterstützen...
     
    der_Kay, 14.02.2007
  3. 2nd

    2ndMacUser Mitglied

    Mitglied seit:
    25.07.2004
    Beiträge:
    8.901
    Zustimmungen:
    242
    Warum nicht nur mit CSS machen?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    
    table tr:hover {
        background-color:#ff0000;
    }
    
    </style>
    
    </head>
    
    <body>
    <table style="border-collapse:collapse">
        <tr>
            <td width="100px" style="border:1px solid black">Text</td>
            <td width="100px" style="border:1px solid black">Text</td>
            <td width="100px" style="border:1px solid black">Text</td>
            <td width="100px" style="border:1px solid black">Text</td>
        </tr>
       
        <tr>
            <td width="100px" style="border:1px solid black">Text</td>
            <td width="100px" style="border:1px solid black">Text</td>
            <td width="100px" style="border:1px solid black">Text</td>
            <td width="100px" style="border:1px solid black">Text</td>
        </tr>
       
        <tr>
            <td width="100px" style="border:1px solid black">Text</td>
            <td width="100px" style="border:1px solid black">Text</td>
            <td width="100px" style="border:1px solid black">Text</td>
            <td width="100px" style="border:1px solid black">Text</td>
        </tr>
    </table>
    
    </body>
    </html>
    
    
    Allerdings brauchst Du einen Javascript-Workaround für den IE v6, da der die Pseudoklasse :hover nur auf a-Selektoren unterstützt.

    Hier findest Du mehr dazu (Stichwort csshover.htc):

    http://www.hoeben.net/node/33
    http://www.hoeben.net/node/83
    http://www.xs4all.nl/~peterned/csshover.html

    [BESSERWISSER_MODUS]

    Übrigens lässt sich

    HTML:
    <td width="100px" style="border:1px solid black">Text</td>
    <td width="100px" style="border:1px solid black">Text</td>
    <td width="100px" style="border:1px solid black">Text</td>
    <td width="100px" style="border:1px solid black">Text</td>
    .
    .
    .
    undsoweiterundsofort
    .
    .
    .
    
    mit CSS via

    HTML:
    table td {
       width: 100px;
       border: 1px solid black;
    }
    
    und

    HTML:
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
    .
    .
    .
    undsoweiterundsofort
    .
    .
    .
    
    vereinfachen und abkürzen. Oder willst Du jedesmal 100 Zellen (oder so) manuell auf eine neue Breite anpassen?

    ;)

    [/BESSERWISSER_MODUS]


    2nd
     
  4. Pixelprofi

    Pixelprofi Thread StarterMacUser Mitglied

    Mitglied seit:
    08.11.2002
    Beiträge:
    410
    Zustimmungen:
    1
    Hey Ihr beiden!

    Zunächst einmal danke für die Hilfe. :thumbsup:

    Das von Dir Kay schaut sehr gut aus. Jetzt teste ich mal, welche Browser damit etwas anfangen können.

    Der Tipp von 2ndreality klingt ebenfalls sehr gut. War bis eben fest der Meinung, dass ich hover nur auf a-Tags anwenden kann. Schaue mir dann auch gleich mal die Workarounds an.
    Deinen Vorschlag bzgl. der globalen Klassendefinition für table und td ist nett - und Standard :Pfeif: ;)

    Halte Euch auf dem Laufenden.

    Viele Grüße
    Pixelprofi
     
    Pixelprofi, 15.02.2007
  5. 2nd

    2ndMacUser Mitglied

    Mitglied seit:
    25.07.2004
    Beiträge:
    8.901
    Zustimmungen:
    242
    Gemäß der Spezifikation kann man :hover auf alle Selektoren anwenden - nur der IE v6 unterstützt das nicht, alle anderen modernen Browser schon (auch IE v7).

    Der Vorteil von der reinen CSS Variante ist der, dass man bei deaktiviertem JS trotzdem noch den Effekt hat - mit der Einschränkung vom Nichtfunktionieren im IE. Nimmt man die JS-Variante, geht es in keinem Browser mehr.

    Aber das ist nur meine Meinung...

    2nd
     
  6. Pixelprofi

    Pixelprofi Thread StarterMacUser Mitglied

    Mitglied seit:
    08.11.2002
    Beiträge:
    410
    Zustimmungen:
    1
    Habe es mit CSS umgesetzt.
    Das Workaround funktioniert wunderbar.

    Nochmals vielen Dank an Euch beide :clap:

    Grüße
    Pixelprofi
     
    Pixelprofi, 17.02.2007
Die Seite wird geladen...
Ähnliche Themen - CSS Klasse per
  1. dennz2017
    Antworten:
    2
    Aufrufe:
    313
  2. hello
    Antworten:
    1
    Aufrufe:
    239
  3. Hoooray
    Antworten:
    2
    Aufrufe:
    334
    Hoooray
    21.07.2015
  4. -PHANTOMIAS-
    Antworten:
    4
    Aufrufe:
    815
    heldausberlin
    20.04.2009
  5. loginvergessen
    Antworten:
    4
    Aufrufe:
    659
    loginvergessen
    29.08.2007
Benutzerdefinierte Suche