Changing the Style of the Parent <li> Tag When Hovering

My WordPress site (on localhost) utilizes a <ul> for a customized menu. How can I modify the CSS of a <li> on hover specifically if it contains a <ul> sub-menu?

Every main menu item has a border-radius but I want to eliminate this feature from the current item (Services, as shown below):

    <div class="main-nav">
      <ul class="menu" id="menu-main-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a>
          <ul class="sub-menu">
            <li><a href="#">Item One</a></li>
            <li><a href="#>Item Two</a></li>
          </ul>
        </li>
        <li><a href="#>Contact</a></li>
      </ul>
    </div>

I have attempted to find a CSS solution and even tried jQuery without success:

    $('ul.sub-menu').parent().hover(function(){
    $(this).addClass('no-radius');
});
jquerycsswordpress-theming

Answer №1

$('.menu li').has('ul').on('mouseover', function() {
    $(this).addClass('hovering');
}).on('mouseout', function() {
    $(this).removeClass('hovering');
});

Answer №2

$(".navigation LI").on("mouseenter", function() {
  if ($("UL", $(this)).length > 0) {
    $(this).addClass("no-border-radius");
  }
}).on("mouseleave", function() {
  $(this).removeClass("no-border-radius");
});

Answer №3

Here is a suggestion:

$("li").hover(function(){
if($(this).parent().hasClass("sub-menu") {
 $(this).css("color", "red");
}
});

Answer №4

$('.dropdown-menu').closest('ul').hover(function(){
    $(this).parent().addClass('rounded');
});

If you're unsure about which element you're targeting, try using console.debug($(this)) to double-check.

Answer №5

$('li>ul.sub-menu').hover(function() {
    $(this).addClass('no-radius');
}, function() {
   $(this).removeClass('no-radius');
});

When implementing this code snippet, keep in mind that the reference to this pertains to the specific ul element, not its parent.

This code checks for any li containing a direct child ul with the class sub-menu, and then adds or removes the specified class to the li itself.

I hope this explanation clarifies things for you!

Best regards!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issues with the count up functionality in jQuery

I'm currently working on a project involving countups. My aim is to have multiple countups displayed on a single page. While having one countup using interval() function poses no issues, I encounter trouble when trying to display two or more countups ...

javascriptjquerycountdown

What is the best way to inline center two block buttons using CSS?

Having difficulty centering two block buttons using inline CSS in the Darkly theme from Bootstrap. I am unable to directly edit the CSS and can only utilize inline CSS due to using the CDN version of the theme. <a href='/start'><button c ...

htmlcssbootstrap-4

Refreshing a page using AJAX form functionalities

After spending some time searching, I am unable to find a satisfactory solution to my issue. I have a "finance" tracker that includes hidden divs which are displayed using jQuery when the corresponding button is clicked. Additionally, I have an Asset Track ...

javascriptphpjqueryhtmlajax

Eliminate any trace of Bootstrap 4 design elements on the .card-header

I'm facing some difficulties in removing all the default styling of Bootstrap 4 from the .card component. It seems like this issue might not be directly related to Bootstrap since I am also experiencing it in Edge browser. Could someone please assist ...

cssbootstrap-4

Undefined will be returned if the data in AngularJS is not set within the $scope

I have developed a factory that contains a list of functions which are called when the state changes. On page load, I am calling dtoResource.rc1Step1DTO(). Although the function executes, when I check the result in the console, it returns undefined. Below ...

javascriptjqueryhtmlangularjs

Tips for creating a clickable textbox

Does anyone know how to make a textbox clickable even when it is set as readonly. I'm looking for a way to make my textboxes clickable like buttons because I have some future plans for them. <input type="text" readonly value="Click me" id="clickm ...

javascriptphpjqueryhtmlajax

The jquery click event is not working as expected

Hey there, I've been working on creating a dropdown menu that can be activated by clicking for better usability on touch screens. $('a.dropsmall2').click(function() { $(this).next('ul').slideToggle(500,'easeInOutQuad'); ...

javascriptjquerycss

The masonry filter is functioning only for a singular time

I have successfully implemented multiple filters using the jQuery Masonry plugin. However, I am facing an issue where once one filter is used, another filter cannot be applied until the page is reloaded (I am still learning about this). Below is my code: ...

jqueryjquery-pluginspluginsfilterjquery-masonry

Vertically align the body of Bootstrap 4 cards with variable header line rows

I have a minimalistic design where I showcase products using cards. However, I am facing an issue where some product titles wrap onto 2 lines while others only wrap onto 1 line. My goal is to vertically align the body text (and price buttons as well). &l ...

htmlcssbootstrap-4alignment

Top Bootstrap dropdown menu overlaid with Leaflet zoom buttons

I'm encountering an issue depicted in the screenshot below. Is this related to bootstrap or leaflet? How can I adjust the position/style of the dropdown menu so that it appears above all other elements? https://i.sstatic.net/cQhN5.png ...

csstwitter-bootstrapleaflet

Issue with integrating jquery path into angular.json in JHipsterI'm facing a problem

Usually, it's quite simple to integrate SCSS styles and the jQuery path into an Angular project by adding them to the script:[] section. However: Upon inspecting the angular.js file created from jhipster, I noticed that the architect part is missing ...

jqueryangularsasscompilationjhipster

Django is indicating that the path is not reachable

I've been struggling with a seemingly silly issue in my code. I can't figure out why it's not working properly. Here is the directory structure of my Django Project: https://i.sstatic.net/0tVo4.png The HTML file I'm targeting (index.h ...

htmlcssdjango

Verify if the AJAX response contains a properly formatted JSON string

After searching on various platforms including SO, I have not found a satisfactory solution to my problem. My issue involves making an ajax call using $.post() and expecting a return in the form of a json-string. There are multiple scenarios that could ar ...

jqueryjsonajax

Increase the size of an image when the mouse hovers over it within a

Recently, I came across this tutorial on creating a zoom in effect for images when hovering over them with the mouse. The tutorial doesn't use tables to display the images, so I was wondering if I could achieve the same effect by placing the images in ...

jquerycss

css issue with focus on ie11

<style type="text/css"> .main { position: absolute; border-radius: 8px; border: none; height: 54%; top: 35%; /*33%*/ color: #FFFFFF; font-size: 0.7em; o ...

htmlcsssasscss-selectors

Error in CSS styling affecting image display on responsive website

My CSS seems to have a bug when it comes to responsive pages with images. Take a look at the demo: https://jsfiddle.net/xr4getom/ If you resize the window on this example, you'll notice that a dark background (#222) appears intermittently. Is there ...

htmlcss

How to trigger the submission of a form within the submission event of another form using jQuery

I am encountering an issue with having two forms on a single page. Whenever I click on the submit button of the parent form, the parent form's submit event is triggered. In this event, I have included logic to submit the second form using the submit m ...

jqueryajaxhtmlform-submit

Preventing Adjacent Text from Moving Due to a Floated i Element

I have a div with a bootstrap icon positioned at the top right corner. However, I want to center the text horizontally without shifting the position of the icon. Is there a way to achieve this? See my sample code here: https://jsfiddle.net/x1Lvyu6t/3/ ...

htmlcss

Transferring the AJAX response into a JavaScript variable

New to AJAX and JS here. I am implementing an AJAX code that fetches data from a php service. I am trying to figure out how to store the returned data in a JavaScript variable, which I can then display on the UI. Below is my AJAX code snippet: <script ...

javascriptphpjqueryhtmlajax

Increase text size according to the height

My goal is to dynamically render text within a div at the largest possible size to fit its width and height. While I've successfully adjusted the width, I'm encountering difficulties with the height. Certain characters like 'y', 'g ...

htmlcssfont-size