CODEWITHSUNDEEP
javascripthtmlhoverhtml-lists
fnkymnky
fnkymnky

Reputation: 94

Style parent li on child li:hover

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.

Upvotes: 2

Views: 2800

Answers (2)

plebksig
plebksig

Reputation: 535

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.

Upvotes: 0

Arnaud Le Blanc
Arnaud Le Blanc

Reputation: 99921

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

Upvotes: 5

Related Questions