Avatar billede traxis Nybegynder
28. maj 2007 - 11:05 Der er 12 kommentarer og
1 løsning

Mouse-over i tabel.

Hej allesammen.

Jeg mangler lidt hjælp til at lave et mouse-over i en tabel.

Min kode er midlertidigt som følgende:
<table width="374" border="0" align="center">
  <tr>
    <td><img src="images/nocountry.gif" alt="Land" width="18" height="12" border="0" align="absmiddle"></td>
    <td><strong>Dato</strong></td>
    <td><strong>Modstander</strong></td>
    <td><strong>Gametype</strong></td>
    <td><strong>Resultat</strong></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

Her kommer mit spørgsmål så:
Hvordan gør jeg sådan, at tabellens rækker skifter baggrundsfarve når jeg fører musen henover? (Og tilbage til normal når man flytter musen self.)

Har en CSS-fil, men ved ikke hvordan jeg fikser classes osv.
- Håber i kan hjælpe :)!
Avatar billede thesurfer Nybegynder
28. maj 2007 - 11:14 #1
Evt noget i den stil:

<style type="text/css">
tr:hover
{
background-color:#ff0000;
}
</style>

<table width="374" border="0" align="center">
  <tr>
    <td><img src="images/nocountry.gif" alt="Land" width="18" height="12" border="0" align="absmiddle"></td>
    <td><strong>Dato</strong></td>
    <td><strong>Modstander</strong></td>
    <td><strong>Gametype</strong></td>
    <td><strong>Resultat</strong></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
Avatar billede notes2c Nybegynder
28. maj 2007 - 11:20 #2
Eller hvis det skal virke i IE før version 7.

<table width="374" border="0" align="center">
  <tr onmouseover="this.style.backgroundColor='lightgreen';" onmouseout="this.style.backgroundColor='';">
    <td><img src="images/nocountry.gif" alt="Land" width="18" height="12" border="0" align="absmiddle"></td>
    <td><strong>Dato</strong></td>
    <td><strong>Modstander</strong></td>
    <td><strong>Gametype</strong></td>
    <td><strong>Resultat</strong></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
Avatar billede traxis Nybegynder
28. maj 2007 - 11:25 #3
notes2c, gider du skrive et svar? :)
- Du får pointene fordi dit virker i min browser :P
Avatar billede traxis Nybegynder
28. maj 2007 - 11:27 #4
Oh, lige en lille tilføjelse.
- Hvad gør jeg, hvis hele rækken skal være et link til en side?
Avatar billede roenving Novice
28. maj 2007 - 11:31 #5
onclick="location.href='http://www.eksperten.dk/spm/780504'"
Avatar billede traxis Nybegynder
28. maj 2007 - 11:34 #6
Tusind tak roenving :)
Avatar billede notes2c Nybegynder
28. maj 2007 - 11:37 #7
Et svar
Avatar billede notes2c Nybegynder
28. maj 2007 - 11:38 #8
Som roenving skriver
Avatar billede traxis Nybegynder
28. maj 2007 - 11:50 #9
Lige endnu et spørgsmål.

Er det muligt, at lave det sådan at når man fører musen over, så skifter fonten også farve?
Avatar billede thesurfer Nybegynder
28. maj 2007 - 12:11 #10
Hmm... Hvor dælen virker tr:hover ikke i IE < v7 ? Er det MS der er 100 år bagud? Det virker fint i Opera v9.21 og FireFox v2.0.0.3..


Med ovennævnte JavaScript version, skal man jo indsætte onmouse-event på samtlige tr'er..

En CSS version vil virke på dem alle.. hvis IE < v7 gider at lege med..
Avatar billede roenving Novice
28. maj 2007 - 12:23 #11
Med IE7 indhentede M$ faktisk 7 år, så de nu kun er 3-4 år bagud ...
Avatar billede notes2c Nybegynder
28. maj 2007 - 12:24 #12
Sådan er livet med IE. Men godt det kommet med version 7.

For at sætte farven på teksten tilføjer du blot.

<tr onmouseover="this.style.backgroundColor='lightgreen';this.style.color='#fff';" onmouseout="this.style.backgroundColor='';this.style.color='';">
Avatar billede traxis Nybegynder
28. maj 2007 - 12:44 #13
notes2c, mange tak.

thesurfer:
Jeg skal bruge det i et PHP-script, så den genererer selv koden hver gang, så det er intet problem :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester