[CSS/HTML] tr a:hover

[Anoniem: 43430]

een op het eerste gezicht makkelijk iets: een hele rij als a:hover instellen om er dus een link van te maken en het andere een background-color te geven. ware het niet dat je dat slechts binnen 1 cel kan doen.. of heb ik het mis? het verplaatsen van de <a>-tag biedt geen resultaat.

Hier mijn voorbeeld van hoe ik het dus ongeveer wil hebben (maar hij moet dus de hele rij van background-color laten veranderen ipv 1 td. En hier de css.

ik wil het dus graag css-only oplossen, possible?

Hier dacht ik YES, crisp geeft me dan toch weer de oplossing! Maar ook hier gaat het slechts om 1 td'tje..

edit:

test-links werken niet meer

[ Voor 10% gewijzigd door Anoniem: 43430 op 30-12-2003 17:53 ]

[supakeen]

JS gebruiken en getElementByID methode

[dominic]

this.parentElement.className wellicht? (Pas op: IE only)

[André]

Volgens mij lukt je dit alleen met JS, en niet aleen met CSS.

[Anoniem: 43430]

ok, ok, ok.. ik zie alweer slechts @#$% Javascript rondvliegen hier

weet ik alleen weinig van.. kan het lezen en edit-en, klein beetje zelf proggen, that's it

let's keep on searchin'.. toch bedankt!

[supakeen]

Anoniem: 43430 schreef op 29 december 2003 @ 22:29:
ok, ok, ok.. ik zie alweer slechts @#$% Javascript rondvliegen hier

weet ik alleen weinig van.. kan het lezen en edit-en, klein beetje zelf proggen, that's it

let's keep on searchin'.. toch bedankt!

Toch is het wat makkelijker

http://www.getelementbyid.com om te beginnen

[kleautviool]

code:

<tr onmouseover="this.style.backgroundColor = '#000'" onmouseout="this.style.backgroundColor = '#fff'">

?

[crisp]

Voor IE zal je wel met JS moeten werken omdat die browser enkelt :hover op een anchor ondersteund, en je kan nu eenmaal niet een table-row in een anchor nesten...

[kleautviool]

[rml][ css] meer css met htc voor IE[/rml]

[Anoniem: 43430]

het is mij nu heel duidelijk allemaal

offtopic:
en dan dit

stond er bij mij: "Tip Of The Day: Don't use "click here" as link text!" (zie topicstart) LOL

[supakeen]

Anoniem: 43430 schreef op 29 december 2003 @ 22:43:
het is mij nu heel duidelijk allemaal

offtopic:
en dan dit

stond er bij mij: "Tip Of The Day: Don't use "click here" as link text!" (zie topicstart) LOL

Werkt niet in Mozilla

[Anoniem: 43430]

kleautviool schreef op 29 december 2003 @ 22:42:
[rml][ css] meer css met htc voor IE[/rml]

ja kwam ik ook langs tijdens mijn zoektocht.. er kan wel een hele voltijd studie aan gewijd worden - maar ach, anders zou het ook maar saai zijn als alles in 1x lukte..

[Anoniem: 43430]

@courvoisier: werkt mijn voorbeeld niet in Mozilla?!

[supakeen]

Anoniem: 43430 schreef op 29 december 2003 @ 22:47:
@courvoisier: werkt mijn voorbeeld niet in Mozilla?!

Nee.

[Anoniem: 43430]

*zucht*

[Anoniem: 32071]

Verwijder display:block in deze regel in je css:
.fragments-table td { height:20px; display:block; }
Het lijkt me wel handig om iig Mozilla (Firebird) geinstalleerd om te kunnen nagaan of daar alles naar behoren werkt.

[kleautviool]

Weird, bij mij werkt het gewoon

[supakeen]

kleautviool schreef op 29 december 2003 @ 23:14:
Weird, bij mij werkt het gewoon

Deze werkt wel in Mozilla

[Anoniem: 43430]

ok ik heb ook Mozilla geinstalleerd.. de site wordt zelfs in beide browsers naar behoren weergegeven

maar nou kijk ik ff naar wat andere sites die ik gemaakt heb en.. *huil*

heb alleen het idee dat Mozilla nog niet door echt veel mensen gebruikt wordt, ja door jullie tweakers juist wel, maar verder.. 2%? 5%?

[Anoniem: 24491]

Anoniem: 43430 schreef op 29 december 2003 @ 23:34:
heb alleen het idee dat Mozilla nog niet door echt veel mensen gebruikt wordt, ja door jullie tweakers juist wel, maar verder.. 2%? 5%?

Maakt niet uit, als je met sites bezig bent, hoort Mozilla op je systeem te staan.

[Clay]

Anoniem: 43430 schreef op 29 december 2003 @ 22:45:
[...]

ja kwam ik ook langs tijdens mijn zoektocht.. er kan wel een hele voltijd studie aan gewijd worden - maar ach, anders zou het ook maar saai zijn als alles in 1x lukte..

voltijdstudie

maar het werkt wel makkelijk hoor;

Cascading Stylesheet:

body {
   behavior:url("csshover.htc");
}

   ... overige styles ...

tr:hover {
   background:silver;
   color:white;
}

Dat heeft imo alleen maar voordelen. Je hoeft in je table code geen markup vervuilende troep op te nemen, en de kleuren etc. staan op 1 plek; in je stylesheet, en het is er dus ook weer makkelijk uit te halen of aan te passen.
Verder, maar dat is mijn mening maar , is zo'n effect als dit een puur visuele toevoeging die geen enkel functioneel doel dient; voor de gebruiker is het totaal niet van belang of dit wel of niet werkt. Het is naar mijn mening dus ook prima te verdedigen dat het bij bepaalde mensen niet te zien is (b.v met :hover en zonder htc in IE). Doe mij dan maar een technisch mooie en verantwoorde oplossing, of helemaal niets.

Enig nadeeltje is natuurlijk dat het wat irreeel standpunt is aangezien je daarmee even 90% van de gebruikers uitsluit. (hoe "onbelangrijk" de feature ook is) maar voor b.v. een persoonlijke- of hobbysite kan dat imo best.

[Anoniem: 43430]

@Clay: over het .htc aspect ben ik het wel met je eens, maar..

• een visueel aspect kan imo wel degelijk functionaliteit hebben, in mijn geval is het nu namelijk duidelijk dat je op die table-row kunt klikken om verdere details te zien; uiteraard kun je er ook op klikken als die table-row niet van background-color verandert, maar dat wordt niet altijd even goed begrepen. en een tekst "klik voor meer informatie" hoort er eigenlijk sowieso bij, dus nu praat ik mezelf tegen, maar dan kom ik op het volgende punt:
• de verschillende browsers bieden allemaal "eigen" visuele mogelijkheden, maar omdat deze niet cross-compatible zijn ben ook ik persoonlijk geneigd om het dan inderdaad maar functioneel te houden ipv ook gebruik te maken van de visuele mogelijkheden. toch vind ik dat verkeerd om, de visuele mogelijkheden dienen vaak om de technische aspecten te ondersteunen dus daar zou je gewoon gebruik van moeten kunnen maken

ach, never mind, dit is eigenlijk het zoveelste cross-browser compatibility geklaag

[Genoil]

Clay schreef op 30 december 2003 @ 10:04:


Dat heeft imo alleen maar voordelen. Je hoeft in je table code geen markup vervuilende troep op te nemen, en de kleuren etc. staan op 1 plek; in je stylesheet, en het is er dus ook weer makkelijk uit te halen of aan te passen.

Enig nadeeltje is natuurlijk dat het wat irreeel standpunt is aangezien je daarmee even 90% van de gebruikers uitsluit. (hoe "onbelangrijk" de feature ook is) maar voor b.v. een persoonlijke- of hobbysite kan dat imo best.

je kunt ook best een table zonder markup-vervuilende troep maken en je kleuren op 1 plek houden zonder htc. het enige dat htc voor zover ik het begrijp echt toevoegd is dat je tr:hover in je css kunt zetten.

met attachevent/addeventhandler en een beetje javascript classname swappen kun je het "mooi" en tegelijkertijd crossbrowser krijgen...

[Clay]

de discussie uit het htc topic hoef hier niet herhaald te worden maar de htc automatiseert het swappen van classnames met attachevents zodat je daar niet over na hoeft te denken, en tr:hover werkt alleen in IE niet, is dus verder al crossbrowser.

[Grijze Vos]

Hier een oplossinkje wat in IE en moz/firebird iig wel werkt. Het was me niet duidelijk of je nou wel of niet een werkend iets had, die link van je doet het bij mijn firebird iig niet.

Dit is wel een javascript oplossing, overigens:

stukje van mn html:

code:

<tr class="bgCellEven" onmouseover="setClass(this, 'bgCellHighLight')" onmouseout="setClass(this, 'bgCellEven')">

javascript functie:

code:

function setClass(theRow, theClass)
{
  theRow.className = theClass;
    return true;
}

Classes de kleuren geven, en wat je niet allemaal wilt doen.

Javascript valt wel mee, als je er eenmaal een paar keer meer hebt geklooid, en de nuttige linkjes hier op tweakers van o.a. crisp kunt vinden

[crisp]

return var is niet nodig, en je kan dus net zo goed dit doen:

code:

onmouseover="this.className='bgCellHighLight'"
onmouseout="this.className='bgCellEven'"

bedenk wel dat het switchen van classes vele malen trager is dan een enkele style property wijzigen; als het je enkel om de achtergrondkleur gaat zou ik gewoon this.style.backgroundColor gebruiken

[Anoniem: 43430]

ow sorry.. die test.html was al een tijd vern**kt (heb ff de link verwijderd)

ben er mee bezig, maar hier is te zien dat het werkt

[Grijze Vos]

werkt idd

btw, mooi kleurenschema, * Grijze Vos houdt van grijs