Cell-rollover-effekt i HTML/CSS?

Tråden skapades och har fått 2 svar. Det senaste inlägget skrevs .
1
  • Medlem
  • International user
  • 2008-04-02 19:59

Jag har slitit mitt hår i timmar för att få till en enkel rollover-effekt i HTML/CSS, men jag får inte till det!

Det här är vad jag försöker uppnå:

1. Det ska ligga en länkad text i en tabellcell. Cellens bakgrund ska vara grå och texten ska vara formaterad med Verdana 11px, vit färg och ingen underline.

2. Vid MouseOver ska cellens bakgrund ändras till vit och texten till grå.

3. Vid MouseOut ska all formatering återgå till punkt 1.

Hur gör jag detta?
Mycket tacksam för svar!

  • Medlem
  • Göteborg
  • 2008-04-02 23:55

För det första: jag hoppas att du använder tabellen till tabulär data, och inte för att skapa sidans layout. Annars gör du fel

Enklaste lösningen är att sätta pseudoklassen ":hover" på td-elementet i CSS-mallen. Den lösningen fungerar dock inte i alla browsers (äldre versioner av IE stöder inte hover på mycket annat än länkar).

Så jag hade nog löst det på följande sätt. På länken kör du följande CSS:

a {
   font: 11px Verdana, sans-serif;
   color: #fff; /* Vit färg */
   background: #777; /* Grå bakgrund */
   text-decoration: none; /* Ingen underline */
   display: block; /* Så att länken fyller ut tabellcellen horisontellt */
   padding: 5px; /* Paddingen kan såklart ändras efter tycke och smak, den är där mest för att fylla ut tabellcellen och skapa lite avstånd */
}

Sen får du sätta en hover-effekt på länken med pseudoklassen ":hover":

a:hover {
    color: #777; /* Grå färg */
    background: #fff; /* Vit bakgrund */
}

Färdigt. "a" i CSSen får du naturligtvis byta ut med godtycklig selektor för att selektera rätt länk.

  • Medlem
  • International user
  • 2008-04-03 08:12

Yes!

Vid ett snabbt test så verkar det fungera! PRECIS som jag vill!

Jag ska testa lite mer ikväll så återkommer jag om jag stöter på patrull. Men det verkar fungera!

MYCKET tack!

1
Bevaka tråden