Cibler un élément parent

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Cibler un élément parent

Message par alv le Mer 16 Mar 2016 - 8:26

Bonjour,
Dans mon code ci-dessous, je souhaiterais qu'au survol de "bandeau_onglet_histoire_ouvert", le lien "bandeau_onglet_histoire" ait "border-bottom: 4px solid #96DC95".

Mon code :
Code:
<a class="bandeau_onglet_histoire"><img src="......"/></a>
..........
<div align="center" class="bandeau_onglet_histoire_ouvert">
   <table width="100%" border="0" cellspacing="0" cellpadding="0">
      ..........
CSS :
Code:
.bandeau_onglet_histoire_ouvert{
   display: none;
   }
.bandeau_onglet_histoire:hover{
   border-bottom: 4px solid #96DC95;
   }
.bandeau_onglet_histoire:hover ~ .bandeau_onglet_histoire_ouvert,
.bandeau_onglet_histoire_ouvert:hover{
   display: block;
   }

Je sais que ça doit ressembler à ça :
Code:
.bandeau_onglet_histoire XXX .bandeau_onglet_histoire_ouvert:hover{
   border-bottom: 4px solid #96DC95;
   }
mais qu'est-ce-que je dois mettre à la place des "XXX" ? Ce que je veux faire doit cibler l'élément parent.

Merci d'avance.


Dernière édition par alv le Ven 18 Mar 2016 - 8:46, édité 1 fois

alv
# Tropactif #

Messages : 1096
Inscrit(e) le : 09/07/2012

http://urlz.fr/2OYC
alv a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cibler un élément parent

Message par alv le Jeu 17 Mar 2016 - 8:32

Up

alv
# Tropactif #

Messages : 1096
Inscrit(e) le : 09/07/2012

http://urlz.fr/2OYC
alv a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cibler un élément parent

Message par Milouze14 le Jeu 17 Mar 2016 - 18:06

Salut alv,
pour les sélecteurs C.S.S je ne pourrais pas te répondre par contre avec ce script a placer à l'endroit que tu désires au survol du lien la bordure s'affichera:

Le script:
Code:

$(function(){
$('.bandeau_onglet_histoire').hover(function(){
$(this).next().toggleClass('borderAnim');
});
});


La C.S.S:
Code:

.borderAnim{border-bottom: 4px solid #96DC95;}

Je ne sais si cela répond à ta demande mais on avance Very Happy .

a++


Milouze14
+ Hyperactif +

Masculin
Messages : 4625
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cibler un élément parent

Message par alv le Jeu 17 Mar 2016 - 18:25

Bonjour,
Le code ne fonctionne pas, rien ne se passe.

Je préfèrerai en CSS, parce que le script ne s'exécutera pas pour les gens qui ont le javascript désactivé.

alv
# Tropactif #

Messages : 1096
Inscrit(e) le : 09/07/2012

http://urlz.fr/2OYC
alv a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cibler un élément parent

Message par Milouze14 le Jeu 17 Mar 2016 - 18:29

Re,
hum étonnant car sur mon fofo de test cela fonctionne.

En espérant que tu puisses trouver une solution mon ami Wink .

a++


Milouze14
+ Hyperactif +

Masculin
Messages : 4625
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cibler un élément parent

Message par alv le Jeu 17 Mar 2016 - 18:45

Désolé, ça marche. Le CSS était en conflit avec celui déjà présent sur mon forum.

Mais il y a quand même un soucis. Entre le lien "bandeau_onglet_histoire" et le div "bandeau_onglet_histoire_ouvert", il y a d'autres liens. Du coup, le code met une bordure sur le lien qui suit "bandeau_onglet_histoire" et pas sur le div.
Deuxième chose, ce que je souhaite faire est l'inverse de ce que fais ton code. J'aimerai qu'en survolant le div "bandeau_onglet_histoire_ouvert", la bordure soit sur le lien "bandeau_onglet_histoire", et pas l'inverse.

alv
# Tropactif #

Messages : 1096
Inscrit(e) le : 09/07/2012

http://urlz.fr/2OYC
alv a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cibler un élément parent

Message par Milouze14 le Jeu 17 Mar 2016 - 19:00

Re,
tu peux donner le code html dans sa totalité stp .

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4625
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cibler un élément parent

Message par alv le Jeu 17 Mar 2016 - 19:08

Le code :
Spoiler:

J'ai un peu changé le code depuis le 1er message : le lien "bandeau_onglet_histoire" est devenu "bandeau_histoire" et le div "bandeau_onglet_histoire_ouvert" est devenu un table "bandeau_histoire_ouvert".

Le CSS :
Spoiler:


Dernière édition par alv le Ven 18 Mar 2016 - 8:41, édité 1 fois

alv
# Tropactif #

Messages : 1096
Inscrit(e) le : 09/07/2012

http://urlz.fr/2OYC
alv a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cibler un élément parent

Message par Milouze14 le Jeu 17 Mar 2016 - 19:12

Ok merci,
juste une petite question ou as tu placé ce code stp?

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4625
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cibler un élément parent

Message par alv le Jeu 17 Mar 2016 - 19:28

Dans le template "overall_header".
Le code n'est pas encore en ligne.

alv
# Tropactif #

Messages : 1096
Inscrit(e) le : 09/07/2012

http://urlz.fr/2OYC
alv a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cibler un élément parent

Message par Milouze14 le Jeu 17 Mar 2016 - 19:38

Hum ce script devrait faire l'affaire:
Code:

$(function(){
$('#bandeau .bandeau_onglet_ouvert').hover(function(){
$('.bandeau_histoire').toggleClass('borderAnim');
  });
});


a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4625
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cibler un élément parent

Message par alv le Jeu 17 Mar 2016 - 19:52

Je teste.


Dernière édition par alv le Jeu 17 Mar 2016 - 20:29, édité 2 fois

alv
# Tropactif #

Messages : 1096
Inscrit(e) le : 09/07/2012

http://urlz.fr/2OYC
alv a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cibler un élément parent

Message par Milouze14 le Jeu 17 Mar 2016 - 20:17

Re,
changes ta feuille de style ainsi:
Code:

.borderAnim1 , .borderAnim2 ,.borderAnim3 ,.borderAnim4
{
  height: 49px !important;
  border-bottom: 4px solid #96DC95;
  }



Et ton script ainsi:
Code:

$(function(){
      $('#bandeau .bandeau_histoire_ouvert').hover(function(){
          $('.bandeau_histoire').toggleClass('borderAnim1');
      });
      $('#bandeau .bandeau_club_ouvert').hover(function(){
          $('.bandeau_club').toggleClass('borderAnim2');
      });
      $('#bandeau .bandeau_actualite_ouvert').hover(function(){
          $('.bandeau_actualite').toggleClass('borderAnim3');
      });
      $('#bandeau .bandeau_saison_ouvert').hover(function(){
          $('.bandeau_saison').toggleClass('borderAnim4');
      });
    });



a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4625
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cibler un élément parent

Message par alv le Jeu 17 Mar 2016 - 20:29

J'ai édité mon précédent message, parce que j'ai trouvé une solution.

J'ai modifié le code pour que ça soit nickel. J'ai enlevé "$(function(){" pour éviter de retarder l'exécution du script et je l'ai placé comme ça :
Code:
<table class="bandeau_histoire_ouvert" width="100%" border="0" cellspacing="0" cellpadding="0">
   <script type="text/javascript">
   $('#bandeau .bandeau_histoire_ouvert').hover(function(){
      $('.bandeau_histoire').toggleClass('borderAnim');
   });
   </script>
   ..........
</table>
<table class="bandeau_club_ouvert" width="100%" border="0" cellspacing="0" cellpadding="0">
   <script type="text/javascript">
   $('#bandeau .bandeau_club_ouvert').hover(function(){
      $('.bandeau_club').toggleClass('borderAnim');
   });
   </script>
   ..........
</table>
Comme ceci, le script s'exécute dès le chargement lorsqu'une personne survole les liens.

C'est un code "propre" comme ça ?

Par contre, pour les gens qui ont le javascript désactivé, la bordure n'apparaîtra, tant pis. Une question comme ça, est-ce-que tu sais combien de personnes ont le javascript désactivé (en %) ?

alv
# Tropactif #

Messages : 1096
Inscrit(e) le : 09/07/2012

http://urlz.fr/2OYC
alv a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cibler un élément parent

Message par Milouze14 le Ven 18 Mar 2016 - 4:22

Salut alv,

hum j'aurais laissé le script tel que, car en fait l'action est sur un hover et
donc le script a largement le temps de se charger (enfin c'est mon avis Very Happy ) .


Il y a quelques années le Javascript était quelques peu désactivé sur beaucoup de navigateur, aujourd'hui il est recommandé de ne plus le faire.
Donc en pourcentage je dirais 98% d'utilisateurs ont le Java d'activé .
a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4625
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cibler un élément parent

Message par alv le Ven 18 Mar 2016 - 8:43

OK, merci pour ces précisions.

Merci beaucoup pour ton aide.
résolu

alv
# Tropactif #

Messages : 1096
Inscrit(e) le : 09/07/2012

http://urlz.fr/2OYC
alv a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum