11540 sujets

JavaScript, DOM et API Web HTML5

Hello Smiley smile

J'ai une page avec une double navigation (1 par image et l'autre par texte) crées dynamiquement (double loop wordpress).
je souhaite que lorsque l'on passe sur un lien, tous les liens qui pointent vers la meme page changent de css et evidement tout en ne connaissant pas ces liens à l'avance...

une idée? Smiley murf
salut,
tu veux dire changer le css des liens visités ? C'est simplement "a:visited". Par contre tu ne pourras pas tout contrôler, question sécurité.
nop, plutot a:hover qui s'appliquerait sur toutes les div ayant la meme url de destination...

en gros, j'ai séparé le titre et les miniatures de chaque post wordpress, et maintenant je souhaiterai que lorsque l'on passe sur l'un ou sur l'autre les 2 réagissent... mais comme c'est dynamique je ne pas faire de css du type a:hover[href="monurl.com"]...
Je n'ai pas l'impression que c'est possible en CSS. Comment se présente ta structure HTML ? Tu pourrais te rabattre sur JS mais quelle est réellement l'utilité de faire ça ?
ben oui je pensais au js, c'est pour ça que j'ai poste ce message dans le forum js Smiley lol
Modifié par viv54 (13 Jun 2013 - 15:12)
viv54 a écrit :
ben oui je pensais au js, c'est pour ça que j'ai poste ce message dans le forum js Smiley lol

lolll Smiley lol Smiley lol Je ne savais pas qu'on était le forum js ^^.
Tu pourrais récupérer tous tes liens avec leur URL spécifique, leur ajouter une class lors de leur survol et la retirer dans le cas contraire.

var myLinks = document.querySelectorAll("[href='mon-lien.html']");

for(var i=0, l=myLinks.length; i<l; i++){
	myLinks[i].addEventListener('mouseover', function(e){
		for(var i=0, l=myLinks.length; i<l; i++){
			myLinks[i].className += " hoved";
		}
	}, false);
	myLinks[i].addEventListener('mouseout', function(e){
		for(var i=0, l=myLinks.length; i<l; i++){
			myLinks[i].className = myLinks[i].className.replace(" hoved", "");
		}
	}, false);
}

Tu stylera le survol en CSS via la class hoved par ex:

.hoved {color: #c00}
[/i][/i][/i][/i][/i]

EDIT: à adapter pour une rétrocompatibilité. Ne marchera pas sur IE7
Modifié par Zelalsan (13 Jun 2013 - 19:49)