[CSS] Link en Hover op een <tr>

[Kaastosti]

Denk je eindelijk klaar te zijn met de dynamische opbouw van een menu... verzinnen ze weer wat nieuws. Het is de bedoeling dat er, zoals je in veel menu's ziet, als je met je muis over een item gaat, deze van kleur veranderd. De items zijn binnen een <tr> gebouwd. Deze hele rij moet dus van kleur veranderen.

Iedere rij krijgt een aparte class toegewezen, afhankelijk van de diepte van het item. Deze classes hete 'navigatie0', 'navigatie1' etc.

In de stylesheet dacht ik daar het volgende voor te gebruiken:

Cascading Stylesheet:

.navigatie {
  font-family: arial, verdana, sans-serif;
  color: #ffffff;
  font-weight: bold;
  font-size: 100%;
  line-height: 130%;
  text-decoration: none;
  background-color: #33aaaa;
}

tr.navigatie:link {
  text-decoration: none;
}

tr.navigatie:hover {
  text-decoration: none;
  color: #337788;
  background-color: #ddeeee;
}

Op dit moment krijgt ieder item dezelfde achtergrond kleur. Dat is niet de bedoeling, maar maakt op dit moment nog weinig uit. Daarom laat ik die kleur ook even lekker staan in .navigatie .

Het hele hover gebeuren werkt echter niet. Er veranderd helemaal niets aan de layout als ik er overheen ga of er op klik. Mijn vraag is dan ook: Zijn deze effecten wel mogelijk op een <tr>? Ik kan namelijk wel gewoon binnen de <tr> onMouseOver properties meegeven, maar dat wil ik eigenlijk niet.

[Willem]

onmouseover="this.style.color='#00ff00';" en ditzelfde geldt voor onmouseout

Maar waarom zou je dat niet willen?

[Verwijderd]

tr:hover werkt alleen in Mozilla & familie (misschien Opera ook), maar niet in Internet Explorer. Ik denk dat je toch met JS moet gaan klooien.

[Kaastosti]

Omdat ik zo min mogelijk javascript wil gebruiken. Ook houdt dat in dat ik dat soort kleuren vast zou moeten stellen binnen javascript. Er zijn verscheidene pagina's, die allemaal andere kleuren gebruiken voor het menu. Er wordt per pagina sowieso een stylesheet geladen over de standaard heen met custom kleuren voor die specifieke pagina.

Daarom wil ik dit binnen de stylesheet aangeven. Voor zover ik weet is het niet mogelijk kleuren als variabelen te declareren binnen een stylesheet. Dan zou ik dus een soort variabele stylesheet in javascript moet implementeren binnen het bestand zelf... en dat is eng.

[crisp]

:hover op andere elementen dan een link werkt alleen in Mozilla (heeft gewerkt in Opera7.0x, maar dat hebben ze er weer uitgesloopt).
Je zult het dus met javascript op moeten lossen in een onmouseover/onmouseout.

tip: je kan met javascript ook gewoon de class wijzigen:

<tr class="normal" onmouseover="this.className='hover'" onmouseout="this.className='normal'">

[ Voor 61% gewijzigd door crisp op 15-05-2003 13:54 ]

[Kaastosti]

Aha! Dat had ik even nodig Hij werkt... bedankt

---
Volgende probleem (houdt het dan nooit op? nee )
In de uitgegenereerde code staat nu het volgende:

HTML:

<td class="navigatie0" onMouseOver="this.className='navigatie0_mo'" onMouseOut="this.className='navigatie0'">
    <div style="position: relative; z-index: 1;">
        <a href='navigatie4.php?var=1' style="font-family: Arial; color: #ffffff; text-decoration: none">1</a>
    </div>
</td>

Dat is heel erg mooi, en de onMouseOver en onMouseOut werkt allemaal naar behoren. Nu zit er echter binnen de <td> nog een linkje. Deze link moet, als standaard, wit zijn. Dat is hij ook (ik blij). Op het moment dat je er overheen gaat, moet deze echter donker worden (anders is het onleesbaar bij een lichte mouseOver kleur).

Dat laatste is een probleem, aangezien hij de link als apart stukje binnen de <td> beschouwd. Als ik binnen de link een class plaats, kleurt hij niet meer mee met de rest van de <td>. Hoe krijg ik 'm zover dat hij zowel de cel van achtergrondkleur laat veranderen, als de font donker te maken?

Simpelweg een color attribuut bij de style knikkeren werkt niet helaas.

[ Voor 91% gewijzigd door Kaastosti op 15-05-2003 15:13 ]

[DeFeCt]

Wat doet een div in godsnaam in een td?

[Kaastosti]

Die hoort daar.

[Verwijderd]

HTML:

div a:hover {
  color: #000;
}

Vind de keuze voor een div ook niet erg logisch, maar goed.....

Oeps foutje in de code geslopen nu is ie goed.

[ Voor 62% gewijzigd door Verwijderd op 15-05-2003 15:21 . Reden: Suf suf ]

[Kaastosti]

Huh? Wil je die misschien even toelichten?

[crisp]

Kaastosti schreef op 15 May 2003 @ 15:17:
Die hoort daar.

tsja, in je voorbeeld heeft die div weinig nut, maar ik neem aan dat dit ook niet meer dan een simplistische weergave is.
die link kan je natuurlijk wel gewoon een hovertje geven. desnoods zet je display property op block en de breedte op 100% zodat 'ie je hele cell vult (is gelijk de hele cell ook meteen de link).

[Kaastosti]

Kijk _die_ reply had ik net even nodig. Meteen nog een probleem opgelost.. namelijk dat ik die hele cel als link wil hebben. Maar waar kan ik dat zetten? Ik zie er iig bij w3school of echoecho niets over.

Ik zal ook nog even toelichten wat die div daar doet:
Het is een menu met uitklap mogelijkheid in javascript. Die uitklap moet altijd op dezelfde positie komen ten opzichte van het item waar hij bij hoort. Van een <tr> of <td> kun je geen eigenschappen opvragen. Daar heb ik dus die <div> voor nodig. Die heeft namelijk een hoogte en breedte, van waaruit ik een absoluut gepositioneerde <div> kan plaatsen als uitklapmenu.

[ Voor 10% gewijzigd door Kaastosti op 15-05-2003 15:26 ]

[DeFeCt]

crisp schreef op 15 May 2003 @ 15:21:
tsja, in je voorbeeld heeft die div weinig nut, maar ik neem aan dat dit ook niet meer dan een simplistische weergave is.

In principe hoort een div toch sowieso niet in een td?

[Kaastosti]

Dat hangt er maar net van af. In dit geval wel, aangezien deze relatieve div de grootte moet krijgen van de hele td. Op die manier kan ik, zoals ik al zeg, een tweede absolute div plaatsen ten opzichte van die relatieve.

[crisp]

DeFeCt schreef op 15 mei 2003 @ 15:27:
[...]
In principe hoort een div toch sowieso niet in een td?

waarom niet? het is perfectely valid hoor. je mag geen block-level elementen binnen inline elementen zetten, maar een table-cell is een soort blocklevel (tables vallen eigenlijk een beetje buiten het block/inline verhaal), dus kan je daar prima een div inzetten.
Ik had zelf al het vermoeden dat het een placeholder was voor een menu, daarvoor is het een prima oplossing

[Kaastosti]

Maar dan blijft m'n vraag:

zet je display property op block en de breedte op 100%

Waar en hoe kan ik dat doen? Ik kan er namelijk niets over vinden

[crisp]

Kaastosti schreef op 15 mei 2003 @ 15:32:
Maar dan blijft m'n vraag:

[...]

Waar en hoe kan ik dat doen? Ik kan er namelijk niets over vinden

simpel voorbeeldje:

Cascading Stylesheet:

a.link_td {
  background-color: #0000ff;
  color: #ff0000;
  display: block;
  padding: 3px;
  width: 100%;
}
a.link_td:hover {
  background-color: #ff0000;
  color: #0000ff;
}

HTML:

<table>
  <tr>
    <td width="50"><a href="link.html" class="link_td">link</a></td>
  </tr>
</table>

[Kaastosti]

Okee dan! Dat block gedeelte werkt perfect
Ik heb het echter niet in de stylesheet, maar gewoon bij de link zelf gezet... dat is toch altijd hetzelfde namelijk. Nu alleen die kleur nog en ik ben blij, maar dat kan ik zelf wel vinden denk ik. Nogmaals dank voor de hulp!