Puur CSS opmaak bij hover ander id

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jan R

Jan R

06/11/2023 07:38:19
Quote Anchor link
Hoi,

Ik heb deze htmlcode
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<div class="trnlinks"><a href="#trn57">57</a> <a href="#trn63">63</a> </div>

Deze verwijzen naar bestaande H1's
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<h1 id="trn57">57</h1>

en
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
 
PHP hulp

PHP hulp

18/06/2024 11:39:09
 
Ivo P

Ivo P

06/11/2023 08:43:29
Quote Anchor link
bedoel je nu gewoon

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
.trnlinks:hover {
  background-color: yellow;
}


of wil je de target h1 van style laten veranderen?
 
Jan R

Jan R

06/11/2023 09:53:15
Quote Anchor link
Net omgekeerd! als ik over de h1 (code 2 en 3) ga wil ik dat de linken veranderen. 1° code met class="trnlinks"

:hover is nu wel gekend voor mij :)
 
E vH

E vH

07/11/2023 11:02:28
Quote Anchor link
Jan, zoiets? : https://jsfiddle.net/19bwe33x/17/

Met een beetje ombouwen zou je hetzelfde kunnen bereiken denk ik.
 
Jan R

Jan R

07/11/2023 18:03:27
Quote Anchor link
Sorry, nee. Zie titel onderwerp: Puur CSS :).
Met javascript doe ik het nu al, waarom dan jquery gebruiken?

Jan
 
Ozzie PHP

Ozzie PHP

08/11/2023 04:38:50
Quote Anchor link
Dit gaat niet via css. Je zal JavaScript moeten gebruiken.
 
Jan R

Jan R

08/11/2023 08:19:35
Quote Anchor link
Zoals ik vermoede. Ik hoopte dat met al die nieuwe Pseudo-classes er iets mogelijk was.

Bedankt.
Jan
 
Ad Fundum

Ad Fundum

08/11/2023 10:12:27
Quote Anchor link
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.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<!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>


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

Jan R

08/11/2023 13:19:43
Quote Anchor link
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!
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<!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.

Bedankt
Jan
 
Ozzie PHP

Ozzie PHP

08/11/2023 14:10:40
Quote Anchor link
Ik weet niet of je nog iets met je IDs doet, maar die zijn nu wellicht overbodig.

id="trn57" en href="#trn57"
 
Jan R

Jan R

08/11/2023 14:58:00
Quote Anchor link
Natuurlijk. De linken moet wel werken hé. Bij een klik spring je naar dat ID
 
Ozzie PHP

Ozzie PHP

08/11/2023 17:01:17
Quote Anchor link
Ah oké. Ik had je code even getest en er gebeurde niks toen ik klikte, maar dat kan omdat de content niet hoog genoeg is.
 
Ad Fundum

Ad Fundum

08/11/2023 17:06:02
Quote Anchor link
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.

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 :-)
 



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.