difficulté à cibler un élément

AKESE
Javascript

Bonjour,
J'ai rencontré ce problème depuis longtemps j'ai essayé de le contourner de différentes manières, mais je n'y arrive pas...(c'est pour ça que je me tourne vers vous).
Je suis encore débutant donc me jugez pas si la réponse est évidente ;(((

Ce que je fais

CODE JAVASCRIPT

underline = function () 
{
  $('.topnav li').mouseenter(() => 
  {
    const bhr = $this.find('hr');
    bhr.css('display', 'block');
    bhr.animate({width : '160'}, function ()

     {

              $('.topnav li').mouseleave(function ()
            {

              bhr.animate({width : '0'},function()
                {
              bhr.css('display', 'none');  
                });      
            });

      });  

  }); 

};  

underline();

CODE HTML

 <header class = "header">
    <ul class="topnav">
      <li><div   class = "TeeNuage"> TeeNuages</div></li>
      <li>
          <a href="#">Matière</a>
          <ul class="subnav">
              <hr>
              <li><a href="#">Français</a><hr></li>
              <li><a href="#">Mathématique</a><hr></li>
          </ul>
      </li>
      <li>
          <a href="accueil.html">Acceuil</a>
           <ul>
              <hr>
           </ul>  
      </li>
      <li>
         <a href="#">About Us</a>
           <ul>
              <hr>
           </ul>      
     </li>
      <li><a href="#">Advertise</a>
           <ul>
              <hr>
           </ul>  
      </li>
      <li><a href="login.html">Login</a>

        <ul>
          <hr>
        </ul>  

      </li>
      <li><a href="#">Contact Us</a>
          <ul>
            <hr>
          </ul>  
      </li>
    </ul>
  </header>

Ce que je veux

Ce que je veux c'est que ma balise hr (de façon animé) s'élargisse quand ma souris passe sur un des éléments li PAR EXEMPLE :

Matière,accueil ect...

Ce que j'obtiens

Et quand je l'essaye sur mon navigateur, ça ne marche tout simplement pas...
*en fait j'ai un fichier php qui possède ma page d'accueil et j'ai fait un include pour invoquer la page html ici présente et un link pour le fichier js

AIDEZ MOI S'IL VOUS PLAÎT !!

3 réponses

Soundboy39
Réponse acceptée

Bonjour,

Quelques points qui j'espere pourront t'aider :

  • "mouseenter" est un état qui correspond à l'entré du curseur dans le bloc, à la place j'utiliserai "mouseover" qui correspond au survol de l'élement;
  • pour $this.find('hr'), ne pas utiliser "$this" mais "$(this)" (cela ne génère pas une erreur dans la console ??) et plutôt que de faire un find() je ferais un children('hr').first();
  • tu n'est peut etre pas obligé d'utiliser la propriété CSS "display" pour le Hr, si la largeur est à 0 il ne devrait pas s'afficher;
  • plutôt que d'utiliser Animate(), j'utiliserais plutot du CSS avec une proprité "transition";
  • ton Html n'est pas valide, tu a des élements Hr qui desendent directement de Ul, ça peut perturber;

Voilà bon courage,

AKESE
Auteur

Merci beaucoup pour ta réponse désolé de ne pas t'avoir répondu plus tôt, en fait j'avais un autre problème qui faisait planter mon code javascript. Et je ne voulais pas executer ton code avant. Du coup j'ai essayé mais cela n'a pas marché :/ . Je crois que c'est moi qui ai fait une erreur donc je reposterai un message d'ici peu.

AKESE
Auteur

Bon bah je me demande si ce n serait pas mieux de suprimer ce sujet x))) je me suis rendu compte que si ça ne marchait pas c'était parce que mon script js était avant l' INCLUDE de ma page php... la honte, mais toute fois Soundboy m'a donné une réponse qui a peris à mon code de ne plus boguer donc Merci beaucoup à lui.