Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Tabellenhintergrundfarbe bei Mouseover ändern“

Mway

Aktives Mitglied

Servus

kann mir einer von euch sagen, wich ich anhan von CSS, den Hintergrund einer Tabelle bei Mouseover farblich verändern lassen kann.

Wenn möglich das ganze ohne div.

Hab schon versucht mit classen aber irgendwie hab ich da was falsch gemacht.
 

TRex2003

Hat es drauf

td:hover {
background: #f60;
}


das geht aber nich im ie. bei dem ie musst du ein <a> einfügen:

td a:hover {
background: #f60;
display: block;
height: 100%;
}
 

Mway

Aktives Mitglied

hab es jetzt mal so gemacht geht aber leider nicht

html datei

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Hier Titel eintragen</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<table>
<tr>
<td>Hallo </br>
wie geht es dir
</td>
</tr>
</table>

</body>
</html>

und hier css wie du es oben geschrieben hast

Code:
td a:hover { 
background: #f60; 
display: block; 
height: 100%; 
}

hab es im ie getestet da ich meinen rechner heute neu gemacht hab und keinen anderen Browser gerade drauf habe !
 

kleinerVampir

Aktives Mitglied

onMouseOver="this.bgColor = '#000000'" <<< wenn mit maus drüber
onMouseOut="this.bgColor = '#FFFFFF'" <<< normal

kannst in <table> sowie in <td> verwenden
funktioniert mit FF und IE
 

Mway

Aktives Mitglied

kleinerVampir schrieb:
onMouseOver="this.bgColor = '#000000'" <<< wenn mit maus drüber
onMouseOut="this.bgColor = '#FFFFFF'" <<< normal

kannst in <table> sowie in <td> verwenden
funktioniert mit FF und IE

das ist aber java und kein css !!!!!!!!!!!!

Meine Frage war ja wie man es mit css macht
 

kleinerVampir

Aktives Mitglied

sorry ich sollte schlafen das mit CSS hatte ich überlesen

bitte hier mit CSS

Code:
table:hover {
  background-color: #000000;
}

EDIT: das Spiel funktioniert auch mit td:hover { background-color: #800000; }

funktioniert jedoch nicht im IE da der :hover im table bereich nicht W3C konform ist
 

TRex2003

Hat es drauf

Mway-Tuning schrieb:
hab es jetzt mal so gemacht geht aber leider nicht

html datei

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Hier Titel eintragen</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<table>
<tr>
<td>Hallo </br>
wie geht es dir
</td>
</tr>
</table>

</body>
</html>

und hier css wie du es oben geschrieben hast

Code:
td a:hover { 
background: #f60; 
display: block; 
height: 100%; 
}

klar geht das so nicht ;) td a:hover { ... das bezieht sich auf ein <a>

html:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Hier Titel eintragen</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<table>
<tr>
<td><a>Hallo </br>
wie geht es dir</a>
</td>
</tr>
</table>

</body>
</html>

versuchs mal so.
 

kleinerVampir

Aktives Mitglied

wenn dann nicht <a> sondern bla bla bla außerdem musst du dann in deine css datei noch TEXT-DECORATION:none mit aufnehmen da sonst der ganze text unterstrichen wird
 

Mway

Aktives Mitglied

kleinerVampir schrieb:
wenn dann nicht <a> sondern bla bla bla außerdem musst du dann in deine css datei noch TEXT-DECORATION:none mit aufnehmen da sonst der ganze text unterstrichen wird

wieso denn <a href="#"> wer sagt den, daß ich einen link machen will !

Und warum soll ich die unterstriche wegmachen wenn ich die haben will ?

Also zur Lösung hat das ja jetzt garnichts beigetragen !
 

kleinerVampir

Aktives Mitglied

so funktionierts auch mit dem ie ... nach einigen basteln *grins* ich hab den css style direkt in der seite musst ggf. ändern ... is ja nur zum demo.

Code:
<html>
<head>
<title></title>
</head>

<style type="text/css">
td a:active { 
background-color: #0000ff;
color: #000000;
text-decoration:none
}
td a:link { 
background-color: #0000ff;
color: #000000;
text-decoration:none
}
td a:hover {
background-color: #ff0000;
color: #000000;
text-decoration:none
}
td a:visited { 
text-decoration:none
}
td a:focus { 
background-color: #00ffff;
color: #000000;
text-decoration:none
}
</style>

<body>
<table>
<tr>
<td bgcolor="#0000ff">[url="#"]Hallo wie geht es dir[/url]
</td>
</tr>
</table>

</body>
</html>
 

kleinerVampir

Aktives Mitglied

Mway-Tuning schrieb:
wieso denn <a href="#"> wer sagt den, daß ich einen link machen will !

Und warum soll ich die unterstriche wegmachen wenn ich die haben will ?

Also zur Lösung hat das ja jetzt garnichts beigetragen !

ganz einfach : Es geht nur VIA Link also <a href...> im IE da der td:hover nicht W3C konform ist funktioniert die methode nur im Firefox nicht im IE ... folglich .. du willst via CSS im IE die Tabellenhintergrundfarbe ändern ... also musst du einen "Fake-Link" einbauen in die Tabelle um den Effekt zu erzielen
 

Mway

Aktives Mitglied

super vielen dank für die Lösung, ich mach es zwar in einer separaten CSS aber das ist ja jetzt kein Problem mehr !
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.158
Beiträge
2.581.872
Mitglieder
67.225
Neuestes Mitglied
Petra
Oben