(Durchschnitt: 5,00 von
5 –
1
Stimme(n)) - Fehler: Nicht angemeldet!
Loading...Lange Tabellenzeilen sind nicht immer angenehm zu lesen, und auch das dezente Abwechseln von Hintergrundfarben hilft nicht viel. In diesem Beispiel zeigen wir einen einfachen MouseOver oder Hover Effekt, der die aktuelle Tabellenzeile unter dem Mauszeiger farbig hervorhebt. Das Beispiel nutzt hier Javascript (obwohl es auch nur mit CSS möglich wäre) – ist daher etwas flexibler und kann bestimmte Zeilen daher auch leicht mit anderen Farben hervorheben, wie wir im zweiten Beispiel zeigen.
| Name | Stadt |
| Florian | Hamburg |
| Martin | Aachen |
| Nico | Kassel |
Der Code für Tabelle und CSS:
<style type="text/css">
table.hover{ border:1px solid #42536f;width:100%; }
table.hover td{ border-bottom:1px solid #CCC;height:23px;padding:5px;font-size:15px; }
.trgruen { background-color:#E3EBBE; }
.trweiss { background-color:#FFFFFF; }
.trgrau { background-color:#E1E1E1; }
</style>
<table border="0" cellpadding="0" cellspacing="0" class="hover">
<tr class="trgrau">
<td style="width:50%;"><b>Name</b></td>
<td style="width:10%;"><b>Stadt</b></td>
</tr>
<tr class="trweiss" onmouseover="this.className='trgruen';" onmouseout="this.className='trweiss';">
<td>Florian</td>
<td>Hamburg</td>
</tr>
<tr class="trweiss" onmouseover="this.className='trgruen';" onmouseout="this.className='trweiss';">
<td>Martin</td>
<td>Aachen</td>
</tr>
<tr class="trweiss" onmouseover="this.className='trgruen';" onmouseout="this.className='trweiss';">
<td>Nico</td>
<td>Kassel</td>
</tr>
</table>
In diesem Beispiel gibt es unterschiedliche Farben bei Mausberührung: So lässt sich in der Tabelle schnell zwischen männlich und weiblich unterscheiden – eine andere Möglichkeit wäre, bei einer Kontenliste die positiven und negativen Konto-Einträge in der Tabelle bei Maus-Berührung per onmouseover hervorzuheben.
| Name | Stadt |
| Florian | Hamburg |
| Martin | Aachen |
| Julia | Berlin |
| Nico | Kassel |
| Miriam | Dresden |
| Tobias | München |
Der Code für Tabelle und CSS:
<style type="text/css">
table.hover{ border:1px solid #42536f;width:100%; }
table.hover td{ border-bottom:1px solid #CCC;height:23px;padding:5px;font-size:15px; }
.trrosa { background-color:#FFE1F3; }
.trblau { background-color:#E1E6FF; }
.trweiss { background-color:#FFFFFF; }
.trgrau { background-color:#E1E1E1; }
</style>
<table border="0" cellpadding="0" cellspacing="0" class="hover">
<tr class="trgrau">
<td style="width:50%;"><b>Name</b></td>
<td style="width:10%;"><b>Stadt</b></td>
</tr>
<tr class="trweiss" onmouseover="this.className='trblau';" onmouseout="this.className='trweiss';">
<td>Florian</td>
<td>Hamburg</td>
</tr>
<tr class="trweiss" onmouseover="this.className='trblau';" onmouseout="this.className='trweiss';">
<td>Martin</td>
<td>Aachen</td>
</tr>
<tr class="trweiss" onmouseover="this.className='trrosa';" onmouseout="this.className='trweiss';">
<td>Julia</td>
<td>Berlin</td>
</tr>
<tr class="trweiss" onmouseover="this.className='trblau';" onmouseout="this.className='trweiss';">
<td>Nico</td>
<td>Kassel</td>
</tr>
<tr class="trweiss" onmouseover="this.className='trrosa';" onmouseout="this.className='trweiss';">
<td>Miriam</td>
<td>Dresden</td>
</tr>
<tr class="trweiss" onmouseover="this.className='trblau';" onmouseout="this.className='trweiss';">
<td>Tobias</td>
<td>München</td>
</tr>
</table>
Hallo zusammen,ich habe eine Frage und hoffe mir kann jemand dabei helfen.Ich habe...
In der Vergangenheit war es mir möglich, mit dem Programm "PDF-XChange Viewer" Texte mit ...