The hover effect on the ul element is not functioning as intended

Question

The hover effect on the ul element is not functioning as intended

Has anyone encountered issues with hovering over ul elements not working?

<ul class="navi">
    <li> <a class='light'>
            Item1
            <div class="hover-name" style="display:none">
                Businesses
            </div>
        </a>

    </li>
    <li> <a class='light'>
            Item2
            <div class="hover-name" style="display:none">
               Agencies
            </div>
        </a>

    </li>
    <li>            
        Item3
        <ul class="hover-name" style="display:none">
            <li><a>hello</a></li>
            <li><a>hello2</a></li>
        </ul>
    </li>
</ul>

I am attempting to display additional elements when hovering over items in the list, but for some reason, it does not work when hovering over the ul "hover-name" element in the provided fiddle.

javascript jquery html css

Answer 1

Answer №1

To ensure proper functionality, it is important to apply a hover event specifically for the last li element that does not contain any anchor with the class light:

$('.navi > li a.light, .navi li:last-child').on("mouseover", function () {
    $('.hover-name', this).show();
}).on("mouseout", function() { 
    $('.hover-name').hide();
});

Check out the updated Fiddle here

If you prefer a different approach as mentioned in your comment, consider targeting the li directly instead of the anchor:

$('.navi > li').on("mouseover", function () {
    $('.hover-name', this).show();
}).on("mouseout", function() { 
    $('.hover-name').hide();
});

Updated Fiddle can be found here

Answer 2

To ensure proper functionality, it is important to apply a hover event specifically for the last li element that does not contain any anchor with the class light:

$('.navi > li a.light, .navi li:last-child').on("mouseover", function () {
    $('.hover-name', this).show();
}).on("mouseout", function() { 
    $('.hover-name').hide();
});

Check out the updated Fiddle here

If you prefer a different approach as mentioned in your comment, consider targeting the li directly instead of the anchor:

$('.navi > li').on("mouseover", function () {
    $('.hover-name', this).show();
}).on("mouseout", function() { 
    $('.hover-name').hide();
});

Updated Fiddle can be found here

Answer 3

Answer №2

Remove the

class='light'

from the remaining 2 elements, and update the

$('.navi > li a.light')

to

$('.navi > li')

Answer 4

Remove the

class='light'

from the remaining 2 elements, and update the

$('.navi > li a.light')

to

$('.navi > li')

Answer 5

Answer №3

Although @Felix provided a helpful answer, an alternative approach would be to exclude a.light from the selector:

$('.navi > li').on("mouseover", function () {
    $('.hover-name', this).show();
}).on("mouseout", function() { 
    $('.hover-name').hide();
});

Answer 6

Although @Felix provided a helpful answer, an alternative approach would be to exclude a.light from the selector:

$('.navi > li').on("mouseover", function () {
    $('.hover-name', this).show();
}).on("mouseout", function() { 
    $('.hover-name').hide();
});

The hover effect on the ul element is not functioning as intended

Answer №1

Answer №2

Answer №3

Similar questions

Having trouble accurately obtaining the height of a DIV element using jQuery

The error message UnhandledPromiseRejectionWarning is being thrown due to a MongoNetworkError that occurred while attempting to connect to the server at localhost:27017 for the first

Angular material is experiencing an issue where content is being cut off or

Using Try...catch compared to .catch

Retrieving the latest iteration of array object attributes and filling in form fields

Use React to increment a variable by a random value until it reaches a specific threshold

Always display all options in MUI Autocomplete without any filtering

Limiting the height of a grid item in MaterialUI to be no taller than another grid item

Using Vue3 and Vuex4: How to efficiently render only a subset of items from an array with v-for

Use Angular ng-route's $route.next feature to smoothly transition between different page views

Is there a way to have content update automatically?

Trigger a fire event upon entering a page containing an anchor

Is there a simpler way to check if the element is not X or if its parent is not X using jQuery?

How to create a see-through background using three.js

Scrolling automatically within a child element that has a maximum height limit

The result of Coordinates.speed is consistently null

Retrieve the user information from Auth0 within the NestJS application

Aligning CSS Grid Center Based on Changing Content Quantity

React Higher Order Components (HOCs) are functioning correctly with certain components but not

Retrieve information from a URL using an Express API