Avatar billede phineas_phreak Nybegynder
26. februar 2004 - 13:08 Der er 8 kommentarer og
2 løsninger

Endnu et problem med Menu

Hejsa står og arbejder på en menu.

Har lavet det med et stylesheet hvori jeg definerer TR egenskaber:

<style>
.menu
{  font-family: "arial";
font-size: 10.5pt;
  font-weight: bold;
  color: #495741;
  }

TR.norm {
    CURSOR: hand }
TR.over {
    CURSOR: hand; BACKGROUND-COLOR: #816641 }
TR.click {
    CURSOR: hand; BACKGROUND-COLOR: #816641 }
</style>

Mit tabeludsnit sådan ud:

<tr class="norm" onmouseover="this.className='over';" onmouseout="this.className='norm';" onClick="this.className='click';location.href='oversigt.html;">
      <td class="menu">FORSIDE</td>
</tr>

Jeg vil gerne have hover farven på <tr> til at være halvgennemsigtig da jeg anvender baggrundsbillede i tabellen.

Jeg vil også gerne have at teksten skifter farve ved hover på TR alene ! (altså ikke den klassikeren med a:hover { color: white };

Hvordan gør jeg dette ? er der en nemmere måde end at anvende onmouseover onclick osv. osv. ?

Og kan det overhovedet lade gøre at få teksten til at skifte farve ved onmouseover på TR ?

På forhånd tak.
Avatar billede Slettet bruger
26. februar 2004 - 14:22 #1
Ja, det kan sagtens lade sig gøre at bruge hover på alt muligt. Desværre understøtter IE det bare ikke - med mindre du bruger javascript til det.

Derudover er det en dårlig ide (har jeg hørt) at skifte klassen på på elementer, da de fleste browsere så skal genberegne ALLE styles. Det er bedre bare at skifte de værdier, der skal være forskellige.
Avatar billede phineas_phreak Nybegynder
26. februar 2004 - 14:29 #2
Kan du ik give et eksempel ?
Avatar billede skovenborg Nybegynder
26. februar 2004 - 14:34 #3
du kan ændre på tekstfarven i en TR med denne lille funktion:
<script type="text/javascript">
function changeTrStyle(tr,prop,stl) {
    for (i=0;i<tr.cells.length;i++) {
        tr.cells[i].style[prop] = stl;
    }
}
</script>

<tr class="norm" onmouseover="this.className='over';changeTrStyle(this,'color','red');"  .....

Problemmet er at color på en TR, som du sikkert har erfaret, ikke gør noget. Alternativt kunne du også bruge CSS til det:
TR.norm {
    CURSOR: hand; }
TR.norm TD {color:white;}
TR.over {
    CURSOR: hand; BACKGROUND-COLOR: #816641 }
TR.over TD {color:red;}
TR.click {
    CURSOR: hand; BACKGROUND-COLOR: #816641 }
TR.over TD {color:blue;}

Men som sandbox bemærker så er det ikke altid en god ide at skifte classen på elementer da browseren skal genberegne sit DOM-træ
Avatar billede lklingenberg Nybegynder
26. februar 2004 - 14:39 #4
Hvis man skal undgå at skifte klassen (hvilket jeg kun kan tilslutte mig), kan man vel bruge getElementById til at fange og ændre de enkelte td'er...

<script type="text/javascript">
function changeMe(){
  document.getElementById('norm').style.background-color = '#816641';
  // andre style formatteringer
}
</script>
<td id="norm" onmouseover="changeMe();" onfocus="changeMe();" style="backgound-color: white;">
Avatar billede phineas_phreak Nybegynder
26. februar 2004 - 14:50 #5
så hvis jeg forstår jer ret. så er det i "piver" over altså tempoet i den løsning jeg har lavet hvori browseren skal læse koden igen hver gang jeg skifter menu punkt ?

Hvis det er det, så kan jeg sige så meget som at den tidligere løsning kørte på billedskift, og da menuen skal laves dynamisk og kaldes fra ASP kan denne løsning ikke bruges.

Så det jeg arbejder på er at få en menu med tekst til at ligne en eksisterende menu med billeder.

Og det er derfor jeg også skal bruge tekstfarveændringer og halv transperante farver
Avatar billede skovenborg Nybegynder
26. februar 2004 - 14:57 #6
halvtransperante farver må næsten være sådan her:
TR.norm TD {filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);-moz-opacity:0.5}
Avatar billede skovenborg Nybegynder
26. februar 2004 - 14:57 #7
...arrgh dumme svar knap ;-)
Avatar billede phineas_phreak Nybegynder
26. februar 2004 - 15:22 #8
Ok det virker fint nok med farveskiftet, men nu ryger teksten jo også med så den bliver 50% transperant.

Er det muligt samtidig at ændre farven på teksten uden brug af A: hover ?
Avatar billede skovenborg Nybegynder
26. februar 2004 - 18:31 #9
prøv mit eller lklingenbergs script - det burde kunne gøre det (selvom mit ændrer det på hele rækker og lklingenbergs på en enkelt celle - så kan du vælge hvad du vil bruge af det).
Avatar billede phineas_phreak Nybegynder
23. marts 2004 - 09:49 #10
Det var nu ik sådan, men har selv fundet ud af noget tilsvarende, du får lidt point får ulejeligheden
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