Highlight the parent item when the child item is being hovered over

Question

Highlight the parent item when the child item is being hovered over

I am working on a menu that has 2 submenus. I want to use jQuery to highlight the item when it is hovered over. However, I am struggling with how to also highlight the parent item when the cursor is on the child item. The class I am using for highlighting is called "vertical-active":

.vertical-active {
background:#0F6;
}

The jQuery function I have so far looks like this:

$(document).ready(function (e) {
$('.submenu a').hover(

function () {
    $(this).addClass('vertical-active');
    $(this).parent('.vertical-links a').addClass('vertical-active');
    },

    function () {
        $(this).removeClass('vertical-active');
        $(this).parent('.vertical-links a').removeClass('vertical-active');
    });
});

The issue seems to be with the parent selector, and I am unsure of how to correctly select the parent item of the submenu.

JSFiddle link:http://jsfiddle.net/6g9tZ/4/

javascript jquery css

Answer 1

Answer №1

$(document).ready(function() {
    $('.submenu a').on('mouseenter mouseleave', function() {
        $(this).add($(this).closest('ul').closest('li').children('a')).toggleClass('vertical-active');
    });
});

FIDDLE

UPDATE:

In order to highlight the parent element as well, this new code can be used:

$('.vertical-links > li > a').on('mouseenter mouseleave', function() {
    $(this).toggleClass('vertical-active')
});

FIDDLE

Answer 2

$(document).ready(function() {
    $('.submenu a').on('mouseenter mouseleave', function() {
        $(this).add($(this).closest('ul').closest('li').children('a')).toggleClass('vertical-active');
    });
});

FIDDLE

UPDATE:

In order to highlight the parent element as well, this new code can be used:

$('.vertical-links > li > a').on('mouseenter mouseleave', function() {
    $(this).toggleClass('vertical-active')
});

FIDDLE

Answer 3

Answer №2

For an effective solution, utilize .siblings along with .closest.

Check out the FIDDLE here

$(document).ready(function (e) {
    $(".vertical-links > li > a").on("mouseenter mouseleave", function(){
        $(this).toggleClass('vertical-active');
    });    

    $('.submenu a').on("mouseenter mouseleave",function () {
        $(this).toggleClass('vertical-active');
        $(this).closest("ul").siblings("a").toggleClass('vertical-active');
    });    
});

Answer 4

For an effective solution, utilize .siblings along with .closest.

Check out the FIDDLE here

$(document).ready(function (e) {
    $(".vertical-links > li > a").on("mouseenter mouseleave", function(){
        $(this).toggleClass('vertical-active');
    });    

    $('.submenu a').on("mouseenter mouseleave",function () {
        $(this).toggleClass('vertical-active');
        $(this).closest("ul").siblings("a").toggleClass('vertical-active');
    });    
});

Answer 5

Answer №3

Revise the necessary sections of your script with:

$(this).parents('li:eq(1)').find("> a").addClass('highlighted');
....
$(this).parents('li:eq(1)').find("> a").removeClass('highlighted');

An issue in your code is that you were trying to select a "parent <a>", which doesn't exist; the <a> is actually a child element of your parent. Therefore, our approach here is to locate a grandparent <li>, not the immediate parent, and then find and highlight its direct child <a>.

In addition, you initially used parent('vertical-links') when it should be corrected to parent('.vertical-links') (note the inclusion of the dot since it's a class not an element).

Answer 6

Revise the necessary sections of your script with:

$(this).parents('li:eq(1)').find("> a").addClass('highlighted');
....
$(this).parents('li:eq(1)').find("> a").removeClass('highlighted');

An issue in your code is that you were trying to select a "parent <a>", which doesn't exist; the <a> is actually a child element of your parent. Therefore, our approach here is to locate a grandparent <li>, not the immediate parent, and then find and highlight its direct child <a>.

In addition, you initially used parent('vertical-links') when it should be corrected to parent('.vertical-links') (note the inclusion of the dot since it's a class not an element).

Highlight the parent item when the child item is being hovered over

Answer №1

Answer №2

Answer №3

Similar questions

Backstretch.js experiencing issues with element functionality, but functioning correctly with body element

How can we effortlessly generate a times table using For loops and arrays?

Troubleshooting: Resolving the Issue of Undefined Property Reading Error

The functions Show() and Hide() may not work in all scenarios within jQuery

Using Highcharts within a Vue.js component

Can you explain the process of accessing data from [[PromiseValue]] while utilizing React hooks?

New Angular Datatables used to create a revitalizing table

Create a border surrounding the matColumn within a sticky matTable

What is the best method for automatically closing the modal window?

Tips for enabling the `ignoreUndefinedProperties` feature in Node.js

Prisma unexpectedly updates the main SQL Server database instead of the specified database in the connection string

Module specifiers that are considered relative must always commence with either "./", "../", or just "/"

Automating testing with JavaScript and Selenium WebDriver

The resource was treated as an image but sent with the MIME type application/octet-stream

Difficulty recognizing sessions in production for a self-hosted Next.js application using Clerk Dev Auth

Obtaining the anchor from the list item that shares the same ID as the cell

Collaborating on a single instance across several processes

Creating a dynamic JSON object and retrieving the response in a JSP for data-driven documents

Unable to establish an external connection with the node

javascript conceal other sections upon hovering