Avatar billede stois Nybegynder
27. september 2004 - 12:32 Der er 13 kommentarer og
2 løsninger

RollOver / MouseOver / Hover -effekt på en hel TD

Hejsa,

Jeg skal til at lave en menu, og jeg vil gerne have en RollOver / MouseOver / Hover - effekt på en hel td, sådan at når man f.eks. køre musen ind over et menupunkt bliver TD'en med punktet i helt sort og teksten bliver hvid...

Er der nogen der kan hjælpe mig her =)

MvH Anders
Avatar billede stois Nybegynder
27. september 2004 - 13:24 #1
Hvis der er nogen der er i tvivl om hvad en TD er så se her...

<table>
  <tr>
    <td>    -\
      tekst    > Det her er en TD
    </td>    -/
  </tr>
</table>
Avatar billede roenving Novice
27. september 2004 - 13:38 #2
Nemmeste metode:

<style type="text/css">
a{
  display:block;
  background:#fff;
  color:green;
  text-decoration:none;
}
a:hover{
  color:white;
  background:black;
}
#menu{
  border:3px outset blue;
  border-collapse:collapse;
}
#menu td{
  border:0;
  padding:0;
}
</style>

<table id="menu">
  <tr>
    <td>
      <a href="#">tekst    &gt; Det her er en TD</a>
    </td>
  </tr>
  <tr>
    <td>
      <a href="#">tekst    &gt; Det her er en TD</a>
    </td>
  </tr>
  <tr>
    <td>
      <a href="#">tekst    &gt; Det her er en TD</a>
    </td>
  </tr>
</table>

-- og der kom lige et par andre ting med !-)
Avatar billede roenving Novice
27. september 2004 - 13:39 #3
Den første deklaration skal nok være:

a,a:link,a:visited{

i stedet for bare

a{
Avatar billede Slettet bruger
27. september 2004 - 13:46 #4
For det første hører dette til i (D)HTML-kategorien - Der er ikke meget "generelt" over spørgsmålet.

Hvis du brugte en browser, der forstod CSS korrekt, så kunne du nøjes med CSS, men IE kan kun finde ud af :hover på <a>-elementer, så hvis du vil understøtte IE, er du nødt til at bruge javascript.

<script type="text/javascript">
<!--
function highlight(sted){
  sted.style="color:#fff;background:#000;";
}

function unhighlight(sted)
  sted.style="color:#aaa;background:#333;";
}

//-->

<td onmouseover="highlight(this);" onmouseout="unhighlight(this);>

Koden er utestet, og du skal lige tilrette til de rigtige farver i unhighlight-funktionen.
Avatar billede Slettet bruger
27. september 2004 - 13:48 #5
Og det er godt at roenving er med, for han er en del bedre til javascript end mig.
Avatar billede roenving Novice
27. september 2004 - 13:53 #6
-- og det er principielt mindre hensigtsmæssigt at udskifte en hel cssText og bedre at udskifte de enkelte properties, så det f.eks. skulle være:

function highlight(sted){
  sted.style.color="#fff;"
  sted.style.background="#000;";
}
Avatar billede Slettet bruger
27. september 2004 - 13:59 #7
roenving: Det kan jeg godt se det fornuftige i. Skal der stadig være ; efter farverne, når man sætter dem på den måde?
Avatar billede stois Nybegynder
27. september 2004 - 14:00 #8
Man burde kunne give point til to =) i har begge fat i det rigtige =)...

Send et svar den der kommer først får point =)
Avatar billede Slettet bruger
27. september 2004 - 14:00 #9
Man kan sagtens dele point mellem flere.
Avatar billede roenving Novice
27. september 2004 - 14:01 #10
Hov, den overså jeg:

sted.style.color="#fff";
Avatar billede Slettet bruger
27. september 2004 - 14:01 #11
Bare vent på roenving, og marker begge vores navne i listen (Måske skal du holde shift inde) før du klikker på Accepter-knappen.
Avatar billede roenving Novice
27. september 2004 - 14:01 #12
Velbekomme '-)

-- og hvis du vil dele point skal du bare markere begge navne i boksen til venstre !-)
Avatar billede stois Nybegynder
27. september 2004 - 14:02 #13
hvordan kan man dele point?

*klask* Jeg skal bare markere mere end en i listen ik'?
Avatar billede stois Nybegynder
27. september 2004 - 14:04 #14
Tada det virkede, sådan nu har i begge fået point... det tog mig kun to år at regne ud *LOL*
Avatar billede roenving Novice
27. september 2004 - 14:23 #15
Tak for point ;~}

-- og du kan måske få noget ud af at lægge denne i foretrukne: http://expfaq.1go.dk !-)
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
Kurser inden for grundlæggende programmering

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