css gebaseerd op data-*
Kan ik op een-of-andere manier een tag opmaken gebasseerd op de inhoud of een dataattributt van een andere tag.
Concreet. Ik heb een tabel 7 kolommen. Deze eerste 6 kolommen worden met php ingevuld op basis van een database de 7° via javascipt. Berekening gekozen door de gebruiker en niet database gevoelig.
Nu zou ik willen dat alle lijnen een ander kleur krijgen bij hover. Dus deze met dezelfde uitkomst in de berekening.
Ik dacht het te doen op deze manier
Code (php)
1
2
3
2
3
[data-nr="attr(data-round)"]:hover {
background: yellow;
}
background: yellow;
}
Het lukt me wel met javascript maar ik denk dat css beter is.
Jan
"Berekening gekozen door de gebruiker en niet database gevoelig."
"Dus deze met dezelfde uitkomst in de berekening."
Voor jouzelf is dit vast heel duidelijk, maar ik snap niet wat je bedoelt.
>> Nu zou ik willen dat alle lijnen een ander kleur krijgen bij hover.
Iedere lijn een andere kleur? Dus blauw, paars, rood, geel?
Probeer zo duidelijk mogelijk te omschrijven wat je bedoelt en geef er bij voorkeur ook een voorbeeld bij. Hoe duidelijker je zelf aangeeft wat het probleem is, des te makkelijker andere forumleden je kunnen helpen.
https://jsfiddle.net/c2n16Lb7/2/
Als je over een cel gaat worden alle lijnen met deze waarde geacentueerd.
Dit wil ik maar dan met css.
Jan
Toevoeging op 24/01/2022 11:56:24:
De kolommen welke er niet toe doen zijn verwijderd evenals de berekende kolom
Nu snap ik wat je bedoelt. Volgens mij kun je niet met css de vormgeving van element x wijzigen door te hoveren over element y. Dus in dat opzicht lijkt javascript me de juiste optie.
Iets wat ik wel zou wijzigen is onmouseenter, onmouseover en onmouseleave. Daarvoor in de plaats zou je beter event listeners kunnen gebruiken. Kijk wat dat betreft eens naar jQuery. Dat werkt makkelijker dan 'standaard' javascript.
Gewijzigd op 24/01/2022 14:31:20 door Ozzie PHP
De meeste mouseenters en meerdere andere routines worden wel aangemaakt in javascript. Wel niet via jquery. maar gewoon via js
Code (php)
1
2
3
4
5
2
3
4
5
trs=document.querySelectorAll(".hovyel[data-id]");
for(i=0;i<trs.length;i++) {
trs[i].addEventListener("mouseover", function(){ divyellow2(this); });
trs[i].addEventListener("mouseout", function(){ divnormal2(this); });
}
for(i=0;i<trs.length;i++) {
trs[i].addEventListener("mouseover", function(){ divyellow2(this); });
trs[i].addEventListener("mouseout", function(){ divnormal2(this); });
}
