✔ MouseOver Effekt in Tabelle

Status
Nicht offen für weitere Antworten.
xthetronx

xthetronx

Erfahrenes Mitglied
Hallo,

ich habe für mein Problem nichts über die Suche finden können, also bitte nicht zu sehr schimpfen, wenn es doch schon beantwortet wurde. :)

Ich würde gerne einen MouseOver Effekt wie im angehangenem Bild.

Der weisse Hintergrund ist bei MouseOver.
Also es soll die komplette Zelle gefüllt sein und die Schriftfarbe geändert, dabei aber der dünne blaue Rand vorhanden sein. Ebenso die dünne weisse Trennlinie zwischen den Worten.

Danke
 

Anhänge

  • css.gif
    css.gif
    892 Bytes · Aufrufe: 69
Hi,

wenn du die Links als Blockelemente definierst, ihnen einen linken Aussenabstand, einen Rahmen
und Hintergrundfarbe zuweist, sollte das Ganze realisierbar sein.

Beispiel:
HTML: 
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="author" content="Quaese" />
<style type="text/css">
  <!--
table{ font-family : "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;}
tr{ height: 20px;
    background: #ffffff;}
td{ width: 70px;}
td a{ display: block;
      color: #ffffff;
      background: #4D8BCA;
      border: 1px solid #4D8BCA;
      text-align: center;
      line-height: 20px;
      font-size: 12px;
      text-decoration: none;
      margin-left: 1px;}
td a:hover{ background: #ffffff;
            color: #4D8BCA;}
td.blue{ background: #4D8BCA;
         width: 20px;}
 //-->
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0">
	<tr>
  	<td class="blue">&nbsp;</td>
  	<td><a href="#">Nav 1</a></td>
  	<td><a href="#">Nav 2</a></td>
  	<td><a href="#" style="margin-right: 1px;">Nav 3</a></td>
  	<td class="blue">&nbsp;</td>
  </tr>
</table>
</body>
</html>
Ciao und gute Nacht
Quaese
 
Sieht klasse aus!
Vielen Dank Quaese, hat es sich ja wieder mal gelohnt aufzustehen und ich habe wieder was gelernt.

Schönes Wochenende noch.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück