• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Tabellen Zelle td hover

A

andynail

Mitglied
Hallo zusammen

ich verwende eine Tabelle als Menueband. Und jetzt hätte ich mir gewünscht das man Zellen css hover zuweisen kann wie einem Link. Und jetzt soll aber auch noch die eine oder andere Zelle hervorgehoben werden, und trotzdem soll der hover Effekt erscheinen:

HTML: 
td.dabei { background-color:transparent; text-align:center}
td.dabei:hover { background-image:url('Pictures/VerlaufAuswahl.jpg'); background-repeat:repeat-x; text-align:center}
td.offen { background-image:url(Pictures/VerlaufAuswahlOffen.jpg); text-align:center }
td.offen:hover { background-image:url('Pictures/VerlaufAuswahl.jpg'); background-repeat:repeat-x; text-align:center}

und den Zellen weise ich je nach Erscheinungswunsch die Klasse 'offen' oder 'dabei' zu. Weise ich der Zelle offen zhu, so erscheint sie hervorgehoben, bis man mit der Maus darüber fährt. Ansonsten funktioniert garnix.

Ich kenne das Prozedere mit onmouseover Funktionen und divs, doch wünsche ich mir das dies auch einfacher geht.

Danke Gruß Andreas
 
Hallo zusammen

es war zuerst nix von wegen eines over Effektes was zu sehen. Dann setzte ich einen Link in die Zelle und damit war ja dann mit hover der gewünschte Effekt zu sehen. Jedoch muss ich mit der Maus auf die herunterklappenden Menüs, so dass dann der hover Effekt gezeigt hatte für was er anwendbar ist.

Also setze ich jetzt den Inhalt der Zellen in ein div
PHP: 
echo "<td Name='Bereiche' ID='Bereiche' style='width:80px; padding:0; ' class='dabei'><div class='BTextStandard' onmouseOver=\"javascript:MenueUp(); this.className = 'MainTextOver'\" onmouseOut=\"javascript:this.className = 'BTextStandard'\" onclick='OpenDaten(this)' Link='Main.php?".urlencode("b=0&db=Main&table=Main")." &MarkerMode='>Main</div></td>";
echo "<td style='padding:0; width:80px;' name='Bereiche' id='Bereiche'><div class='BTextStandard' id='BText' name='BText' onclick='OpenDaten(this)' onmouseover='MenueDown($Index)'>$Bereich</div></td>";

Und die dazugehörige css Formatierung:
HTML: 
.MainTextOver { border-bottom:1px solid #000; background-color:#eee; width:80px; text-align:center; height:100%; line-height:28px; cursor:pointer; background-image:url('Pictures/VerlaufAuswahl.jpg'); background-repeat:repeat-x }
.BTextStandard { border-bottom:1px solid #000; background-color:transparent; text-align:center; height:100%; line-height:28px; width:80px; cursor:pointer }
.BTextOver { background-color:#eee; width:80px; text-align:center; height:100%; line-height:28px; cursor:pointer; background-image:url('Pictures/VerlaufAuswahl.jpg'); background-repeat:repeat-x }

Jedoch bin ich mir zu unsicher ob das stabil angezeigt wird. Also würde ich mich über Auskunft und Hilfe sehr freuen.

Danke Gruß ÄAndreas
 
Zuletzt bearbeitet:
Dein Ausgangscode funktioniert tadellos, CSS reicht hierfür aus.
HTML: 
<!doctype html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
td.dabei { background-color:transparent; text-align:center}
td.dabei:hover { background-color:red;; text-align:center}
td.offen { background-color:green;text-align:center }
td.offen:hover { background-color:yellow; text-align:center}
</style>
</head>

<body>

<table>
    <tr>
        <td class="dabei">dabei </td>
        <td class="offen">offen </td>
        <td class="dabei">dabei </td>
        <td class="offen">offen </td>
    </tr>
</table>
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben