Tabellenzellen mittels CSS bei Maus-Hover hervorhaben

Status
Nicht offen für weitere Antworten.
L

LordSikon

Mitglied
Hi,
ich hab mir eine Navigation gebastelt zur Location auswahl.
Das ganze ist eine Liste (<li>) welche ich mit dem CSS Befehl (display: inline;) so formatiert hab, das der Punkt wegfällt, und die BEfehle nacheinander in Reihe angezeigt werden.
Nun hab ich die Liste einfach in mehrere Zellen einer Tabellegesplittet.
Die Links ändern beim Mouseover bereits ihre Farbe, allerdings möchte ich auch gerne, dass sie die Zelle, in welcher der Link steht, ihre Farbe ändert -> siehe PHP MyAdmin

Danke schon mal im Vorraus

Gruß
Patrick
 
exchange.className

Hi LordSikon,

diese Technik sollte dir weiterhelfen:

PHP: 
<html>
<head>
<title>:::exchange.className:::</title>

<style type="text/css">
td.normal
{
width:150px;
height:16px;
border-width:2px;
border-style:groove;
border-color:#445566;
font-family:verdana;
font-size:10px;
color:#ddeeff;
padding-left:10px;
cursor:hand;
}

td.hover
{
width:150px;
height:16px;
background-color:#1E5982;
border-width:2px;
border-style:groove;
border-color:#445566;
font-family:verdana;
font-size:10px;
color:#ddeeff;
text-align:right;
padding-right:10px;
cursor:hand;
</style>

</head>
<body bgcolor="#112233">

<table width=150>
 <tr>
  <td class="normal"
         onMouseOver="this.className='hover';"
         onMouseOut="this.className='normal';"> item 1
  </td>
 </tr>
 <tr>
  <td class="normal"
         onMouseOver="this.className='hover';"
         onMouseOut="this.className='normal';"> item 2
  </td>
 </tr>
 <tr>
  <td class="normal"
         onMouseOver="this.className='hover';"
         onMouseOut="this.className='normal';"> item 3
  </td>
 </tr>
 <tr>
  <td class="normal"
         onMouseOver="this.className='hover';"
         onMouseOut="this.className='normal';"> item 4
  </td>
 </tr>
 <tr>
  <td class="normal"
         onMouseOver="this.className='hover';"
         onMouseOut="this.className='normal';"> item 5
  </td>
 </tr>
</table>

</body>
</html>
 
Das Menue gefällt mir sehr gut.
Ich habe jetzt probiert, einen Link einzufügen:

<td class="normal"
onMouseOver="this.className='hover';"
onMouseOut="this.className='normal';"><a href="http://www.tutorials.de"> item 1 oder noch mehr Text</a>
</td>

Jetzt bekomme ich allerdings immer eine Konflikt mit a:Visited der mir die ganze Optik zerschießt. Der Link wird dann lila mit Unterstrich dargestellt.

Füge ich:

a:visited {font-family: verdana; color:#ffffff; text-decoration:none;}
a:hover { font-family: verdana; color:rgb(46,89,126); text-decoration:none; }
a:active { font-family: verdana; color:rgb(46,89,126); text-decoration:none; }
a:link { font-family: verdana; color:#ffffff; text-decoration:none; }
a: { font-family: verdana; color:#ffffff; text-decoration:none; }

in die Style-Angaben mit ein, wird der Link nur bei direktem überfahren und nicht bereits beim überfahren der Tabellenzelle richtig dargestellt.

Jemand einen Tipp wie ich das mit dem Link hin bekomme?

Besten Dank im voraus

Gruß
TommyDr :eek:
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück