Nu zou ik willen dat indien de gebruiker "hovered" in de betrokken id's de trnlinks wijzigen zodat de gebruiker ziet waar hij bezig is.
Ik moet zelf nog zien wat het beste is maar ik denk aan schaduw of kleur te wijzigen.
Zoals ik vermoede. Ik hoopte dat met al die nieuwe Pseudo-classes er iets mogelijk was.
Bedankt.
Jan
?Onbekende gebruiker
08-11-2023 10:12
Zo nieuw zijn pseudo-classes niet, CSS module 3 is er al een tijdje.
Je moet gewoon een beetje creatief zijn met HTML en CSS en dan lukt het prima zonder JavaScript.
Je hebt niet eens het HTML ID nodig om het te laten werken. Al kan je wel de H1 extra benadrukken met :target, wanneer de pagina net geladen is en daarmee het HTML ID in de URL target (na '#') zit.
<!DOCTYPE html>
<html>
<head>
<title>CSS Test</title>
<style>
a { text-decoration: none; }
a span {
text-decoration: underline;
position: absolute;
top: 0;
}
a:nth-child(1) span { left: 1em; }
a:nth-child(2) span { left: 3em; }
h1, p { color: black; }
.trnlinks a:hover div:not(:hover) h1 { background: yellow; }
</style>
</head>
<body>
<div class="trnlinks">
<a href="#trn57">
<span class="label">57</span>
<div id="trn57">
<h1>57</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</a>
<a href="#trn63">
<span class="label">63</span>
<div id="trn63">
<h1>63</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</a>
</div>
</body>
</html>
[size=xsmall]Toevoeging op 08/11/2023 11:23:48:[/size]
Mocht bovenstaande een beetje onlogisch of imperfect overkomen, dan klopt dat.
Want wat je vraagt gaat tegen principes is van goed UX-design:
Nu zou ik willen dat indien de gebruiker "hovered" in de betrokken id's de trnlinks wijzigen zodat de gebruiker ziet waar hij bezig is.
De gebruiker is bezig met hoveren over het één, dat is waar hij/zij naar kijkt. En dan is het onlogisch dat daarmee iets anders oplicht dat zich niet in hetzelfde gebied (geneste HTML-elementen) hoeft te bevinden.
Daarvoor biedt CSS alleen de :target peuso-class, waarmee je een andere CSS stijl kan geven aan de anchor waar je naartoe bent gegaan nadat je er op hebt geklikt.
Dat is iets anders dan wat :hover doet.
Het is dus omgekeerd :)
bij hoveren van de teksten moeten de linken gekozen worden. Dank zij jouw voorbeeld heb ik het kunnen omdraaien. Dus dit is het geworden!
<!DOCTYPE html>
<html>
<head>
<title>CSS Test</title>
<style>
.anker a { text-decoration: none; }
.anker a span {
text-align: center;
position: absolute;
top: 0;
width: 100%;
}
.anker a {
position: absolute;
display: inline-block;
width: 5em;
height: 2rem;
top: 0;
}
.anker:nth-of-type(1) a { left: 1em; }
.anker:nth-of-type(2) a { left: 7em; }
.anker:nth-of-type(3) a { left: 13em; }
.anker:nth-of-type(4) a { left: 19em; }
.anker:nth-of-type(5) a { left: 25em; }
.anker a {
color: white;
background-color: gray;
border-radius: 10px;
font-size: 18px;
padding: 5px;
text-decoration: none;
font-weight: 900;
}
.trnlinks div.anker:hover a {
background: yellow;
color: red;
}
</style>
</head>
<body>
<div class="trnlinks">
<div class="anker" id="trn57">
<a id="a1" href="#trn57">
<span class="label">57</span>
</a>
<h1>57</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="anker" id="trn63">
<a id="a2" href="#trn63">
<span class="label">63</span>
</a>
<h1>63</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="anker" id="trn58">
<a id="a3" href="#trn58">
<span class="label">58</span>
</a>
<h1>58</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="anker" id="trn62">
<a id="a4" href="#trn62">
<span class="label">62</span>
</a>
<h1>62</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</body>
</html>
Probleem is dat sommige data sterk trekt op de 1-4 andere toernooien (max 5 hardcoded) en soms weet de ingever niet wat hij doet :) pc kennis (en logisch denken) laat soms veel te wensen over.
