Javascript Girl
  1. Javascript Girl
  3. Style parent li sur l'enfant li: survoler
Intereting Posts
Localstorage sur Internet Explorer ne fonctionne pas Highcharts: Colonne empilée augmentez borderWidth sur l'état sélectionné Comment puis-je assurer que D3 termine de charger plusieurs CSV avant que javascript ne s'exécute? Différence entre setTimeout () et setInterval () Javascript soit parseInt ou +, en ajoutant au lieu d'ajouter Comment retarder l'appel de la fonction javascript? Comment rendre le modèle en route avec Params dans Express? Quelles sont les différences entre les observables et les promesses en JavaScript? JQuery Hover Drop-Down-Menu Full Width Size Le code JavaScript est obsolète. Qu'est-ce que cela signifie dans la pratique? JQuery $ .cookie n'est pas une fonction Notification push au navigateur client Polymer + requirejs: les attributs sur ont été liés aux données avant la mise à niveau du polymère de l'élément Jquery Datepicker déclencher après avoir changé le mois (après le mois) Dojo: Puis-je ajouter deux widgets ou plus à la même région BorderContainer?

Style parent li sur l'enfant li: survoler

J'ai creusé toute la journée pour savoir comment façonner le parent li lorsque survoler un élément de l'enfant.

par exemple 

<ul> <li> Parent Element </li> <ul> <li> Child Element </li> </ul> <ul>

J'ai trouvé d'innombrables messages demandant comment le faire dans CSS pour trouver qu'il n'est pas possible. Les gens disent "vous pouvez le faire avec Javascript" mais jamais dire comment!

Je suis plutôt un newb Javascript, donc une aide serait très appréciée.

Merci.

EDIT: Voici le code source sorti. Je ne sais pas si cela affectera les sélecteurs requis pour le Javascript / jQuery car, comme vous pouvez le voir, il ajoute des informations supplémentaires dans le nom de la classe, c'est-à-dire "page-item-9" en plus du nom de classe déjà ("page_item "). Ceci est ajouté par WordPress, mais j'ai seulement besoin d'utiliser "page_item" pour le faire référence dans le CSS. 

  <ul class="pagenav"> <li class="page_item page-item-12 current_page_item"><a href="#" title="Home">Home</a></li> <li class="page_item page-item-2"><a href="#" title="About">About</a></li> <li class="page_item page-item-4"><a href="#" title="Corporate">Corporate</a></li> <li class="page_item page-item-5"><a href="#" title="Fashion, Hair &amp; Beauty">Fashion, Hair & Beauty</a></li> <li class="page_item page-item-6"><a href="#" title="Live Music">Live Music</a> <ul class='children'> <li class="page_item page-item-11"><a href="#" title="Music 1">Music 1</a></li> </ul> </li> <li class="page_item page-item-7"><a href="#" title="Weddings">Weddings</a> <ul class='children'> <li class="page_item page-item-10"><a href="#" title="Wedding 1">Wedding 1</a></li> </ul> </li> <li class="page_item page-item-8"><a href="#" title="Miscellaneous">Miscellaneous</a></li> <li class="page_item page-item-9"><a href="#" title="Contact">Contact</a></li> </ul>

EDIT 2:

Voici ce que j'ai dans le fichier header.php à l'aide des conseils donnés. 

 <style type="text/css"> .highlighted { background:#000; } </style> <script type="text/javascript"> $(function() { $('.page_item .page_item').mouseenter(function() { $(this).closest('.page_item').addClass('highlighted'); }).mouseleave(function() { $(this).closest('.page_item').removeClass('highlighted'); }); }); </script>

S'il n'y a rien de mal à cela, il doit s'agir de problèmes avec WordPress. Le code fonctionne bien sans la hiérarchie WordPress ennuyeuse.

Le javascript: 

 <!-- add the following line only if you are not already using jQuery: --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $('.page_item .page_item').mouseenter(function() { $(this).parent().closest('.page_item').addClass('highlighted'); }).mouseleave(function() { $(this).parent().closest('.page_item').removeClass('highlighted'); }); </script>

Ce que cela signifie, c'est que lorsque la souris entre dans l'un des éléments <li> enfant, cela ajoute la classe en highlighted au parent <li> . Et lorsque la souris part, la classe est supprimée. Donc, il vous suffit de créer une classe en highlighted maintenant 🙂

$(this).closest('.page_item') recherche simplement l'élément parent le plus proche qui correspond au sélecteur .page_item (donc, le parent le plus proche avec une classe page_item ).

Si vous avez vérifié que la bonne classe est appliquée à l'élément, je suis plutôt sûr que vous ne précisez pas vos styles. Spécifiez aussi loin que possible, y compris les parents ul et li du style que vous souhaitez définir. C'est juste parce que WordPress utilise une hiérarchie si longue (et ennuyeuse) pour ces styles.