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
avatar

alv
Membre habitué(e)

Messages : 1280
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
avatar

alv
Membre habitué(e)

Messages : 1280
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++

avatar

Milouze14
Membre actif

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

https://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é.
avatar

alv
Membre habitué(e)

Messages : 1280
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++

avatar

Milouze14
Membre actif

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

https://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.
avatar

alv
Membre habitué(e)

Messages : 1280
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++
avatar

Milouze14
Membre actif

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

https://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
avatar

alv
Membre habitué(e)

Messages : 1280
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++
avatar

Milouze14
Membre actif

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

https://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.
avatar

alv
Membre habitué(e)

Messages : 1280
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++
avatar

Milouze14
Membre actif

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

https://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
avatar

alv
Membre habitué(e)

Messages : 1280
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++
avatar

Milouze14
Membre actif

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

https://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 %) ?
avatar

alv
Membre habitué(e)

Messages : 1280
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++
avatar

Milouze14
Membre actif

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

https://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
avatar

alv
Membre habitué(e)

Messages : 1280
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