[CSS/DOM] COL-element

[BikkelZ]

Als ik in FireFox een HTML document open waarin ik een COL-element de volgende style meegeef:

Cascading Stylesheet:

col {background-color:green;}

Dan zijn alle cellen binnen deze COL vallen groen. Logisch.

Als ik in de DOM-Inspector kijk, dan zie ik dat de COL elementen geen childnodes bevatten. Lijkt me op zich ook wel logisch als ik naar de HTML-structuur kijk. Maar stel nu dat ik wil dat ik als ik over een van de TD's hover die in deze COL valt dat de hele kolom geel wordt, is dat wel mogelijk via een CSS-standaard, of wordt dit uberhaupt niet ondersteund?

Het is redelijk makkelijk met JavaScript te doen, de uitgecommentarieerde delen zijn de delen die je normaal zou gebruiken om het via de rijen te doen.

JavaScript:

function makeColYellow(obj)
{
    brothers = obj.parentNode.childNodes;
    famsize = brothers.length;
    var number = null;
    for (i = 0; i < famsize; i++)
    {
        if (brothers[i] === obj)
        {
            number = i;
            break;
        }
    }
    uncles = obj.parentNode.parentNode.parentNode.getElementsByTagName("COL");
    /*uncles = obj.parentNode.parentNode.getElementsByTagName("TR");*/
    uncsize = uncles.length;
    uncles[number].style.backgroundColor = "yellow";
    /*for (g = 0; g < uncsize; g++)
    {
        uncles[g].childNodes[number].style.backgroundColor = "yellow";
    }*/
}

Hoe kan ik dit zelfde effect bereiken door CSS? Zit dit al in een van de specificaties? Want ik krijg het wel voor elkaar om hele rijen met een :hover te laten oplichten zonder JS te gebruiken, maar voor kolommen werkt dit niet.

[BtM909]

Het verbaast me, want IE support het nl. wel om col's te gebruiken voor styling. Ik zou zo 1-2-3 geen oplossing voor FF bedenken; 'k ga ff door met brainstormen.

[chem]

Ik heb wel eens wat gedaan met colgroup:hover, dat werkt in FF wel iig.

[BikkelZ]

chem schreef op vrijdag 22 september 2006 @ 10:57:
Ik heb wel eens wat gedaan met colgroup:hover, dat werkt in FF wel iig.

Sorry mensen, ben even een klein weekje naar Parijs geweest, en dientengevolge zo ontstresst dat ik dit topic even was vergeten

Waar ga ik in de fout bij deze opmaak als het jou wel lukt om bij COLGROUP een :hover toe te kennen?

Cascading Stylesheet:

td {background-color:black;}
tr:hover td {background-color:yellow;}
colgroup:hover {background-color:yellow;}

HTML:

<table>
<colgroup></colgroup><colgroup></colgroup><colgroup></colgroup>
<tr><td>text</td><td>text</td><td>text</td></tr>
<tr><td>text</td><td>text</td><td>text</td></tr>
<tr><td>text</td><td>text</td><td>text</td></tr>
</table>

--------------

Dit:

Cascading Stylesheet:

colgroup:hover td {background-color:yellow;}

Werkt dus ook niet.

[ Voor 6% gewijzigd door BikkelZ op 02-10-2006 09:01 ]

[chem]

Hmz, ik vergis me; ik heb het wel in de css staan, maar het werkt niet

sorry