Cibler un élément parent

[alv]

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.

[alv]

Up

[Invité]

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 .

a++

[alv]

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

[Invité]

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

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

a++

[alv]

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.

[Invité]

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

a++

[alv]

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:

[Invité]

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

a++

[alv]

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

[Invité]

Hum ce script devrait faire l'affaire:

Code:


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



a++

[alv]

Je teste.

[Invité]

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

[alv]

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 %) ?

[Invité]

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


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

[alv]

OK, merci pour ces précisions.

Merci beaucoup pour ton aide.