Puur CSS opmaak bij hover ander id
Ik heb deze htmlcode
Code (php)
1
<div class="trnlinks"><a href="#trn57">57</a> <a href="#trn63">63</a> </div>
Deze verwijzen naar bestaande H1's
Code (php)
1
<h1 id="trn57">57</h1>
en
Code (php)
1
<h1 id="trn63">63</h1>
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.
Kan dit of moet ik toch rekenen op javascript?
Jan
Code (php)
1
2
3
2
3
.trnlinks:hover {
background-color: yellow;
}
background-color: yellow;
}
of wil je de target h1 van style laten veranderen?
:hover is nu wel gekend voor mij :)
Met een beetje ombouwen zou je hetzelfde kunnen bereiken denk ik.
Met javascript doe ik het nu al, waarom dan jquery gebruiken?
Jan
Bedankt.
Jan
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.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!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>
<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>
Toevoeging op 08/11/2023 11:23:48:
Mocht bovenstaande een beetje onlogisch of imperfect overkomen, dan klopt dat.
Want wat je vraagt gaat tegen principes is van goed UX-design:
Quote:
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.
bij hoveren van de teksten moeten de linken gekozen worden. Dank zij jouw voorbeeld heb ik het kunnen omdraaien. Dus dit is het geworden!
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!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>
<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.
Bedankt
Jan
id="trn57" en href="#trn57"
Jan R op 08/11/2023 13:19:43:
Het is dus omgekeerd :)
[..]
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.
[..]
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.
Gegevensinvoer van de gebruiker beperken is iets dat je niet moet vergeten om te doen. In mijn ervaring leggen de gebruikers de schuld altijd bij de computer, en niet bij zichzelf.
Toch leuk dat het is gelukt :-)