A:link color ne fonctionne pas dans une DIV

**clavier12AZQSWX** · 15/02/2024, 12h02

bonjour,

j'ai une DIV de class mega_bouton.
Dedans j'ai un lien A.
Je veux que ce lien soit en noir en active,survol..etc.
J'ai pas avoir tourné mon code dans tous les sens depuis 1 heure, je ne trouve pas ce qui cloque, il ne vient jamais en noir alors que la propriété de soulignement en HOVER fonctionne bien !!!
une idée du problème ?

mon code html d'integration :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div class="mega_bouton">
<a title="mon infobulle" href="https://www.developpez.net/" target="_blank">ligne<br />ligne2</a>
</div>

ma classe :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.mega_bouton{
	background-color: #FFA400; /*   #09998C */
	color:#000000;
	font-weight: bold;
	cursor: pointer;
	text-transform: uppercase;	
}
 
.mega_bouton:hover {
background-color: #FFA400; /* #0AB1A2 */ 
}
 
.mega_bouton a:link {color:#000000; text-decoration: none; font-weight: bold;}
.mega_bouton a:visited {color:#000000; text-decoration: none; font-weight: bold;}
.mega_bouton a:hover {color:#000000; text-decoration: underline; font-weight: bold;}
.mega_bouton a:active {color:#000000; text-decoration: none; font-weight: bold;}

Je m'arrache les cheveux

, je ne comprends pas pourquoi l'attribut text-decoration de soulignement fonctionne mais pas l'attribut color sur les liens !!!!
j'ai tenté de remplacer #000000 par black (ou red) mais ça change jamais la couleur du text du lien A dans la div mega_bouton!
pourquoi ? où est-ce que j'ai fauté ?

**ASCIIDEFOND** · 15/02/2024, 16h22

Salut clavier12AZQSWX,

La fonctionnalité de la pseudoclasse ":visited" a été restreinte dans de nombreux navigateurs modernes (Fx4, IE9, Chrome) pour empêcher les exploits CSS.
https://www.alsacreations.com/actu/l...e-visited.html

Une solution pour changer la couleur d'un lien visité avec un peu de JavaScript.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .mega_bouton {
            /* background-color: #FFA400; */
            color: #000000;
            font-weight: bold;
            cursor: default;
            text-transform: uppercase;
        }
 
        .mega_bouton:hover {
            background-color: #FFA400;
        }
 
        .mega_bouton p {
            margin: 0px;
        }
 
        .mega_bouton a {
            text-decoration: none;
            color: inherit;
        }
 
        .mega_bouton a:hover {
            text-decoration: underline;
        }
    </style>
</head>
 
<body>
    <div class="mega_bouton">
            <a id="visited-a" title="mon infobulle" href="https://www.developpez.net/" target="_blank">ligne</a>
        <p>ligne 2</p>
    </div>
    <script>
        let visitedA = document.getElementById('visited-a')
 
        visitedA.addEventListener('click', () => {
            visitedA.style.textDecoration = 'underline'
            visitedA.style.color = '#d203d2'
        })
    </script>
</body>
 
</html>

**clavier12AZQSWX** · 16/02/2024, 09h27

merci pour l'info au sujet de visited, je ne connaissais pas.
mais le souci ne vient pas de là car même en enlevant la partie visited, les liens n'ont pas la couleur #000000 comme indiqué dans ma css ! et pourtant ils sont bien soulignés en hover comme voulu !
alors pourquoi le ' text-decoration' fonctionne mais pas l'attribut 'color' dans

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

.mega_bouton a:hover {color:#000000; text-decoration: underline; font-weight: bold;}

par curiosité j'ai ajouté un background-color et lui il marche bien !

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

.mega_bouton a:hover {color: #000000; background-color: lightgreen; text-decoration: underline; font-weight: bold;}

**ProgElecT** · 16/02/2024, 10h53

Salut

.mega_bouton a:hover {color: Black;.
ou
.mega_bouton a:hover {color: #000;.
à la place de #000000 ?

**clavier12AZQSWX** · 16/02/2024, 11h11

j'ai testé les deux cas, ça fonctionne toujours (cache reset FR...).
je tourne en rond... j'ai renommé ma class sans le underscore au cas où...
j'ai bien mis un espace après le "color: " au cas où ..
j'ai tenté de mettre un faux lien pour être sûr que le visited n'est pas utilisé mais non , même pas!
mais toujours pas résolu ! mes liens restent dans l'espace bleu-anthracite du site.
c'est comme si il pouvait un avoir un post-traitement qui viendrait recorriger la couleur des liens mais pas le soulignement ni les autres attributs !

dans le F12 de chrome , j'ai pointé l'endroit et j'ai vais des propriétés CSS de 'color' qui sont barrées . Qu'est-ce que cela signifie ?
Nom : attribut_barre.png
Affichages : 283
Taille : 8,0 Ko

Nom : attribut_barre.png
Affichages : 283
Taille : 8,0 Ko

Dans mon code html où j'ai défini ma class (dans un custom.css), se peut-il que dans les includes qui suivent, une propriété vienne annuler ma couleur ?

c'est dommage qu'il existe pas un outil qui collecte tous les include CSS et les fusionnes pour voir le déroulement séquentiel...
Mais j'ai vérifié, et de tous les <link rel="stylesheet" > le mien est le 21eme et dernier, donc normalement aucune chance qu'une déclaration CSS annule mon attribut color!

**ProgElecT** · 16/02/2024, 16h51

Re

j'ai fait ce petit projet tout simple

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE html>
<html lang="fr">
	<!-- Commentaires HTML -->
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<style>
                        /* ************************************ Commentaires style ********************************************** */
                        .mega_bouton{
                                background-color: #FFA400; /*   #09998C */
                                color:#000000;
                                font-weight: bold;
                                cursor: pointer;
                                text-transform: uppercase;      
                        }
 
                        .mega_bouton:hover {
                                background-color: #FFA400;
                        }
 
                        .mega_bouton a:link {color:white; text-decoration: none; font-weight: bold;}
                        .mega_bouton a:visited {color:black; text-decoration: none; font-weight: bold;}
                        .mega_bouton a:hover {color:red; text-decoration: underline; font-weight: bold;}
                        .mega_bouton a:active {color:green; text-decoration: none; font-weight: bold;}
                </style>
	</head>
	<body>
		<div class="mega_bouton">
			<a title="mon infobulle" href="https://www.developpez.net/" target="_blank">
				ligne 1
			</a>
			<br />
			<a title="mon infobulle" href=	"https://www.developpez.net/forums/d2161022/dotnet/langages/vb-net/creer-touche-raccourcie-caracteres-graphiques-alt-p-9824-a/" target="_blank">
			ligne2
			</a>
		</div>
	</body>
</html>

et bien, cela fonctionne.

Donc tu dois avoir un CSS qui se charge après ton propre CSS.

**clavier12AZQSWX** · 19/02/2024, 10h42

pareillement ,ce petit projet similaire à mon code dedans fonctionne.

je vais essayer de pister d'où provient ce changement alors....

A:link color ne fonctionne pas dans une DIV

CSS

Discussions similaires

Partager

Partager