A voir également:
- Garder couleur lien survolé et changer autres
- Changer dns - Guide
- Lien url - Guide
- Créer un lien pour partager des photos - Guide
- Verifier un lien - Guide
- Excel cellule couleur si condition texte - Guide
5 réponses
babane5
Messages postés
99
Date d'inscription
mercredi 2 novembre 2011
Statut
Membre
Dernière intervention
26 juin 2012
11
9 nov. 2011 à 11:42
9 nov. 2011 à 11:42
En pensant que tu as trois lien (class) => .lien1 .lien2 .lien3
.lien1:hover > .lien2, .lien3 {}
Je n'ai pas test, donc je peux pas te dire si sa fonctionne vraiement !
.lien1:hover > .lien2, .lien3 {}
Je n'ai pas test, donc je peux pas te dire si sa fonctionne vraiement !
Mihawk
Messages postés
4315
Date d'inscription
mercredi 29 mars 2006
Statut
Contributeur
Dernière intervention
6 janvier 2015
846
9 nov. 2011 à 11:46
9 nov. 2011 à 11:46
Bonjour,
Oui c'est bien évidemment possible, moyennant l'usage du Javascript.
Tu peux, par exemple, créer 2 classes CSS : "lienActif" et "lienInactif". Ensuite quand tu passes sur un lien, tu appelles l'événement Javascript "onMouseOver" qui va comporter une boucle parcourant tous les liens de la page, afin de changer leur classe (via monLien.className) pour leur donner la classe "lienInactif". Le navigateur fera le reste.
Note que, si toutes liens se trouve dans le même div parents, par exemple :
Je te conseille alors d'utiliser le DOM.
Puis
C'est un premier jet ; Il faut aussi faire la méthode qui remet tous les liens dans l'état initial. De puis je ne suis pas sûr à 100% du element.parentNode.childNodes.get(i) ; c'est peut-être element.parentNode.childNodes[i] mais je n'ai pas le temps de vérifier.
J'espère que cela te met sur la voie...
Oui c'est bien évidemment possible, moyennant l'usage du Javascript.
Tu peux, par exemple, créer 2 classes CSS : "lienActif" et "lienInactif". Ensuite quand tu passes sur un lien, tu appelles l'événement Javascript "onMouseOver" qui va comporter une boucle parcourant tous les liens de la page, afin de changer leur classe (via monLien.className) pour leur donner la classe "lienInactif". Le navigateur fera le reste.
Note que, si toutes liens se trouve dans le même div parents, par exemple :
<div> <a></a> <a></a> etc... </div>
Je te conseille alors d'utiliser le DOM.
<div> <a onMouseOver="montrer(this);" class="lienActif"></a> <a onMouseOver="montrer(this);" class="lienActif"></a> etc... </div>
Puis
<script type="text/javascript">
function montrer(element){
for(var i=0 ; i<element.parentNode.childNodes.length ; i++){
if (element.parentNode.childNodes.get(i) != element){
element.parentNode.childNodes.get(i).className = "lienInactif";
}
}
}
</script>
C'est un premier jet ; Il faut aussi faire la méthode qui remet tous les liens dans l'état initial. De puis je ne suis pas sûr à 100% du element.parentNode.childNodes.get(i) ; c'est peut-être element.parentNode.childNodes[i] mais je n'ai pas le temps de vérifier.
J'espère que cela te met sur la voie...
babane5
Messages postés
99
Date d'inscription
mercredi 2 novembre 2011
Statut
Membre
Dernière intervention
26 juin 2012
11
9 nov. 2011 à 11:57
9 nov. 2011 à 11:57
Ou tu le fais en jQuery
<script type="text/javascript" src="js/jquery.js">
<div>
<a class="lien"></a>
<a class="lien"></a>
<a class="lien"></a>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".lien").mouseenter(function(){
$("lien").css("color", "blue"); // Couleur que tu veux qu'elles prennes
$(this).css("color", red"); // Couleur du liens qui ne dois pas changer
});
$(".lien").mouseleave(function(){
$("lien").css("color", "red"); // Couleur retours à la normal
$(this).css("color", red"); // Couleur retours à la normal
});
});
</script>
Bre
<script type="text/javascript" src="js/jquery.js">
<div>
<a class="lien"></a>
<a class="lien"></a>
<a class="lien"></a>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".lien").mouseenter(function(){
$("lien").css("color", "blue"); // Couleur que tu veux qu'elles prennes
$(this).css("color", red"); // Couleur du liens qui ne dois pas changer
});
$(".lien").mouseleave(function(){
$("lien").css("color", "red"); // Couleur retours à la normal
$(this).css("color", red"); // Couleur retours à la normal
});
});
</script>
Bre
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Bon ben après plusieurs heures d'efforts, je crois que cette fois c'est un peu trop compliqué pour moi! Je dépose les armes! Pas de regrets, je reste avec mon css actuel... Merci en tout cas pour vos conseils qui serviront certainement à d'autres visiteurs du forum / Ciao!
Mihawk
Messages postés
4315
Date d'inscription
mercredi 29 mars 2006
Statut
Contributeur
Dernière intervention
6 janvier 2015
846
9 nov. 2011 à 22:24
9 nov. 2011 à 22:24
Dommage avec un début de code on t'aidait à le finir !
