• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Hover für Tabelle und Schrift

S

SnakeME2

New member
Hallo,

ich habe eine kleine Frage zur "Hover-Funktion". Ich möchte das sich die Farbe einer Tabelle ändert wenn ich mit der Maus darüber fahre, dabei soll sich aber auch noch die Textfarbe in der Tabelle ändern. Auf www.porsche.de könnt ihr sehen wie ich das meine. Wenn man mit der Maus links im Menü über die schwarzen Tabellen mit weißer Schrift fährt verändert sich das in weiße Tabellen mit roter Schrift.

Vielen Dank schonmal für eure Hilfe!
 
Moin!

Das ist nicht mit CSS sondern Javascript gemacht. Schon kraß, daß gesamte Navigation von JS abhängt.

Ahoi - Pit
 
Hi!
SnakeME2 schrieb:
... brauche das dringend ;)
Zum Vergrößern anklicken....
Was? Eine totale Abhängigkeit von Javascript für Deine Navigation oder den hover-Effekt?

Was das hovern angeht, kuckst Du (ohne JS):
PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Beispiel</title>
<style type="text/css">
<!--
.rahmen td{
border-left:1px solid red;
border-bottom:1px solid red;
}
.rahmen{
border-top:1px solid red;
border-right:1px solid red;
}
td a{
display:block;
background-color:#000000;
color:#ffffff;
padding:5px;
font-family:verdana, sans-serif;
font-size:0.8em;
}
td a:hover{
background-color:#ffffff;
color:#000000;
}
-->
</style>
</head>
<body>
<table class="rahmen" cellspacing="0" cellpadding="0">
<tr>
<td><a href="#">blah 1</a></td>
<td><a href="#">blah 2</a></td>
</tr>
<tr>
<td><a href="#">blah 3</a></td>
<td><a href="#">blah 4</a></td>
</tr>
</table>
</body>
</html>
Ahoi - Pit
 
Wie man eine Hover-Farbe für Tabellen macht weis ich natürlich das ist nicht das Problem. Ich möchte das wenn man mit dem Mauszeiger über eine Tabelle fährt das sich die Hintergrundfarbe UND die Schriftfarbe ändert! Wenn das ein Javascript ist dann bitte ich euch das jemand mal ein Beispiel macht wie das genau funktioniert, schließlich sind wir hier in einem Javascriptforum ;)

Danke!
 
SnakeME2 schrieb:
schließlich sind wir hier in einem Javascriptforum
Zum Vergrößern anklicken....
Nö - wir sind im Forum 'CSS und XHTML', dementsprechend habe ich Dir ein Beipiel gepostet, wo mittels CSS beim hovern eines Links in einer Tabellenzelle Hintergrundfarbe UND die Schriftfarbe verändert werden.

Offensichtlich hast Du meinem Schnipsel aber keine Beachtung geschenkt (was Du ja auch nicht mußt).

Ahoi - Pit
 
Oh mein Gott...

vielleicht hätte ich deinen Post doch richtig lesen sollen, dachte das sei nur um die Hintergrundfarbe der Tabelle zu ändern.

Vielen Dank für deine perfekte und vorallem extrem schnelle Hilfe! Klasse Forum ;)
 
moin zusammen!

hätte noch ne frage zu der ausführung von pit-r: meine ganze homepage ist in tabellen aufgebaut, jedoch benötige ich nur bei der navigationsleiste (auch eine tabelle) einen hover effekt. mit deinen css-tags werden jedoch alle tabellen in der seite mit einem hover effekt versehen. gibt es eine bestimmte möglichkeit, einzelne tabellen zu "hovern"? für eine hilfe wäre ich dankbar.

mfg schrepfer
 
Das ist 'ne andere Baustelle.
Da musst Du anders rangehen.
Poste doch mal den QT Deiner Navileiste...
 
das wäre der quelltext des headers (der text bezieht sich auf eine externe css-datei):
Code: 
 <table width="663" height="25" border="1" bordercolor="#FFFFFF" class="title_small">
   <tr bordercolor="#9E9E9E"> 
    <td width="65" height="25" bgcolor="#E6E6E6">  <a href="link1">_link1</a></td>
    <td width="65" height="25" bgcolor="#E6E6E6">  <a href="link2">_link2</a></td>
    <td width="65" height="25" bgcolor="#E6E6E6">  <a href="link3">_link3</a></td>
    <td width="65" height="25" bgcolor="#E6E6E6">  <a href="link4">_link4</a></td>
    <td width="65" height="25" bgcolor="#E6E6E6">  <a href="link5">_link5</a></td>
    <td width="65" height="25" bgcolor="#E6E6E6">  <a href="link6">_link6</a></td>
    <td width="65" height="25" bgcolor="#E6E6E6">  <a href="link7">_link7</a></td>
   </tr>
 </table>
 
Das würde ich ganz anders angehen.
Bist Du einigermaßen fit in CSS?
Dann nimmst Du am besten ein div mit einer Liste.
Z.B.:
Code: 
<div id="menu">
<ul>
<li style="float:left;"><a href="#">_link1</a></li>
<li style="float:left;"><a href="#">_link1</a></li>
<li style="float:left;"><a href="#">_link1</a></li>
<li style="float:left;"><a href="#">_link1</a></li>
<li style="float:left;"><a href="#">_link1</a></li>
</ul>
</div>
Dann regelst Du den Rest mit CSS...
 
Ich muß mich wundern, wie schwierig es ist die Techniken von gestern nicht mehr zu verwenden.
Wieso machst Du Dich so abhängig von JS?
Ich mein, Jedem das seine, aber CSS wäre die bessere Lösung.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben