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 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

alv
Membre habitué

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

https://www.forumpeuplevert.com
alv a été remercié(e) par l'auteur de ce sujet.

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

Message par alv Jeu 17 Mar 2016 - 8:32

Up
alv

alv
Membre habitué

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

https://www.forumpeuplevert.com
alv a été remercié(e) par l'auteur de ce sujet.

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

Message par Invité 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++

Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

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

Message par alv 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

alv
Membre habitué

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

https://www.forumpeuplevert.com
alv a été remercié(e) par l'auteur de ce sujet.

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

Message par Invité 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++

Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

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

Message par alv 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

alv
Membre habitué

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

https://www.forumpeuplevert.com
alv a été remercié(e) par l'auteur de ce sujet.

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

Message par Invité Jeu 17 Mar 2016 - 19:00

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

a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

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

Message par alv 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

alv
Membre habitué

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

https://www.forumpeuplevert.com
alv a été remercié(e) par l'auteur de ce sujet.

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

Message par Invité Jeu 17 Mar 2016 - 19:12

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

a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

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

Message par alv Jeu 17 Mar 2016 - 19:28

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

alv
Membre habitué

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

https://www.forumpeuplevert.com
alv a été remercié(e) par l'auteur de ce sujet.

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

Message par Invité 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++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

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

Message par alv Jeu 17 Mar 2016 - 19:52

Je teste.


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

alv
Membre habitué

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

https://www.forumpeuplevert.com
alv a été remercié(e) par l'auteur de ce sujet.

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

Message par Invité 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++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

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

Message par alv 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

alv
Membre habitué

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

https://www.forumpeuplevert.com
alv a été remercié(e) par l'auteur de ce sujet.

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

Message par Invité 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++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

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

Message par alv Ven 18 Mar 2016 - 8:43

OK, merci pour ces précisions.

Merci beaucoup pour ton aide.
résolu
alv

alv
Membre habitué

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

https://www.forumpeuplevert.com
alv a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

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