login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Table bg color on rollover (Opgelost)

Offline Mica - 19/06/2007 22:29
Avatar van MicaLid
Hallo,
kzoek om met css te maken dat je in een table rows hebt en als je met je muis over een row gaat dat de achtergrond kleur veranderd van die row.

vb van wat ik bedoel:
http://www.larissameek.com/
helemaal onderaan bij categories als je over een link gaat veranderd de achtergrond kleur.

iemand klein scriptje van iets dergelijks?

Thx

3 antwoorden

Gesponsorde links
Offline Stijn - 19/06/2007 22:38
Avatar van Stijn PHP expert
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="menu" onmouseover="this.style.backgroundColor='#FF0000';" onmouseout="this.style.backgroundColor='#00FF00';" style="background-color=#00FF00;">Inhoud</div>
Offline smoos - 19/06/2007 22:47 (laatste wijziging 19/06/2007 22:48)
Avatar van smoos PHP gevorderde Daar heb je geen tabel voor nodig dat kan ook alleen met een link. Heb een voorbeeldje voor je geschreven. Laat maar weten of je er wat aan hebt en het begrijpt
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.   <head>
  4.     <title>Css tr mouseover</title>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6.     <style type="text/css">
  7.  
  8.     a.knop {
  9.       /* Kleuren voor de knop */
  10.       border: 1px solid #2d76A2;
  11.       background-color: #dae4f8;
  12.       color: #000000;
  13.  
  14.       /* Grote van de knop */ 
  15.       display: block;
  16.       width: 150px;
  17.       padding: 10px 0;
  18.  
  19.       /* Tekst opmaak */
  20.       text-align: center; /* Tekst in het midden */
  21.       text-decoration: none; /* Geen streepje */
  22.       font-weight: bold; /* Dik gedrukt */ 
  23.     }
  24.  
  25.     /* Bij mouse over de kleuren veranderen */
  26.     a.knop:hover {
  27.       border: 1px solid #dae4f8;
  28.       background-color: #2d76A2;
  29.       color: #ffffff;
  30.     }
  31.  
  32.     </style>
  33.   </head>
  34.   <body>
  35.     <a href="#" class="knop">Knop</a> &nbsp;
  36.     <a href="#" class="knop">Knop</a> &nbsp;
  37.     <a href="#" class="knop">Knop</a>
  38.   </body>
  39. </html>
Offline Mica - 19/06/2007 22:47
Avatar van Mica Lid heb het zelfs nog simpeler opgelost 
php code - Bekijk de code zonder highlighting - Klap code in 
  1. .tbl a {
  2. 	width:100%;
  3. 	background-color: #FFFFFF;
  4. 	text-align: center;
  5. 	display:block;
  6. 	text-decoration: none;
  7. 	color:#000000;
  8. }
  9. .tbl a:hover {
  10. 	text-decoration: none;
  11. 	background-color: #DCDCDC;
  12. 	color: #000000;
  13. }
  14.  
  15. <table class="tbl">
  16. <tr>
  17. <td>
  18. <a>table</a>
  19. </td>
  20. </tr>
  21. </table>


toch hartelijk bedankt voor je hulp !
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.347s