css gebaseerd op data-*

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jan R

Jan R

23/01/2022 19:43:38
Quote Anchor link
Hi

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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
[data-nr="attr(data-round)"]:hover {
    background: yellow;
}
maar dit blijkt niet te werken. data-round wordt dan natuurlijk ingevuld via javascript.

Het lukt me wel met javascript maar ik denk dat css beter is.

Jan
 
PHP hulp

PHP hulp

27/05/2022 21:35:50
 
Ozzie PHP

Ozzie PHP

24/01/2022 10:30:47
Quote Anchor link
Kun je misschien duidelijker uitleggen wat je bedoelt met:

"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.
 
Jan R

Jan R

24/01/2022 11:53:48
Quote Anchor link
Mijn 1° fiddle ooit :)
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
 
Ozzie PHP

Ozzie PHP

24/01/2022 14:30:48
Quote Anchor link
Gefeliciteerd met je 1e fiddle :-)

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
 
Jan R

Jan R

25/01/2022 07:47:57
Quote Anchor link
Daar vreesde ik al voor. Toch bedankt.
De meeste mouseenters en meerdere andere routines worden wel aangemaakt in javascript. Wel niet via jquery. maar gewoon via js
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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); });
    }
 
Ad Fundum

Ad Fundum

25/01/2022 09:15:14
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.