2

I've been digging all day to find out how to style the parent li when hovering on a child li element.

e.g.

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

I've found countless posts asking how to do it in CSS to find it's not possible. People say "you can do it with Javascript" but never say how!

I'm somewhat of a Javascript newb so some help would be much appreciated.

Thanks.

EDIT: Here is the outputted source code. I'm not sure if it will affect the selectors required for the Javascript/jQuery because, as you can see it adds additional info into the class name i.e. "page-item-9" on top of the class name there already ("page_item"). This is added by Wordpress but I've only needed to use "page_item" to reference it in the 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 is what I have inside my 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 is nothing wrong with that it must be issues with Wordpress. The code works fine without the annoying Wordpress hierarchy.

fnkymnky
  • 94
  • 2
  • 13

2 Answers2

5

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

What this does is that when the mouse enters one of the child <li> elements, this adds the highlighted class to the parent <li>. And when the mouse leaves, the class is removed. So you just have to create a highlighted class now :)

$(this).closest('.page_item') just searches for the closest parent element which matches the .page_item selector (so, the closest parent with a page_item class).

Arnaud Le Blanc
  • 98,321
  • 23
  • 206
  • 194
  • This is great! However, I'm using it in conjunction with my Wordpress navigation and so adding the classes "parent" and "child" to the navigation isn't possible without a whole load of other coding issues for myself with PHP. Is there any way to do it without the naming of the classes? All the li elements have the class "page_item". – fnkymnky Jan 25 '11 at 12:09
  • childs or parents or both have the class page_item ? – Arnaud Le Blanc Jan 25 '11 at 12:53
  • you can just change the `.child` and `.parent` selectors; for example `$('li.page_item li.page_item')` will select all `li` elements with class `page_item` which also are in an `li` element with class `page_item`. And `closest('li.page_item')` will find the first parent `li` element with class `page_item`. – Arnaud Le Blanc Jan 25 '11 at 13:04
  • I tried using $('li.page_item li.page_item') and it didn't work. See the source code above. – fnkymnky Jan 25 '11 at 13:55
  • Nup! That's not working either. Sitting staring at it because there must be something I have missed surely. – fnkymnky Jan 25 '11 at 14:47
  • Now it should (It happens that closest can also match the element itself.) Check that you have a `highlighted` class and it should work. – Arnaud Le Blanc Jan 25 '11 at 14:59
  • I've updated my post above with what I have. It's pretty much what you have supplied but still no joy. :( – fnkymnky Jan 25 '11 at 23:17
  • http://jsfiddle.net/9sq2F/ it seems to work; check that you have the same code than in my answer :-) – Arnaud Le Blanc Jan 26 '11 at 08:46
  • I got it (finally. :) Your script worked a charm. Turns out it was an issue with loading jQuery that was preventing it from working. I was using "" to include the jQuery which didn't work for some reason. Thank you very much. :) – fnkymnky Jan 27 '11 at 04:42
0

If you have checked that the right class is applied to the element I'm pretty sure that you just aren't specifying your styles enough. Specify as far back as you can, including the ul and li parents of the style you want to set. This is just because Wordpress uses such a long (and annoying imo) hierarchy for these styles.

plebksig
  • 537
  • 5
  • 22