javascript - Style parent li on child li:hover -


i've been digging day find out how style parent li when hovering on child li element.

e.g.

<ul> <li> parent element </li>     <ul>     <li> child element </li>     </ul> <ul> 

i've found countless posts asking how in css find it's not possible. people "you can javascript" never how!

i'm of javascript newb appreciated.

thanks.

edit: here outputted source code. i'm not sure if affect selectors required javascript/jquery because, can see adds additional info class name i.e. "page-item-9" on top of class name there ("page_item"). added wordpress i've needed use "page_item" reference in 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 &#038; 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:

here have inside header.php file using advice given.

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

if there nothing wrong must issues wordpress. code works fine without annoying wordpress hierarchy.

the javascript:

<!-- add following line if not 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> 

what when mouse enters 1 of child <li> elements, adds highlighted class parent <li>. , when mouse leaves, class removed. have create highlighted class :)

$(this).closest('.page_item') searches closest parent element matches .page_item selector (so, closest parent page_item class).


Comments

Popular posts from this blog

java - SNMP4J General Variable Binding Error -

windows - Python Service Installation - "Could not find PythonClass entry" -

Determine if a XmlNode is empty or null in C#? -