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 & 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:
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
Post a Comment