When a menu item is clicked, apply a class and change the display property to

I currently have an HTML menu with a submenu structured as follows:

<li id="item-3" class="menu-item has-children-3">
                    <a href="#" class="sf-with-ul"><span>Auto</span></a>
                <ul class="sub-menu fadeOut animated fast" id="cpx" style="">
                    <li id="menu-item-9" class="menu-item"><a href="#"><span>Reno яхту</span></a></li>
                    <li id="menu-item-6" class="menu-item"><a href="#"><span>Audi</span></a></li>
                </ul>
                </li>

My goal is to achieve the following behavior: When hovering over the "Auto" menu, I want to change the ul element from fadeOut to fadeIn, set the style="display:block", and upon mouseout revert back to fadeOut with the style="display:none" while also adding the class fadeOut to the ul element.

javascriptmenu

Answer №1

If you want to achieve this effect using only CSS, you can use the element+element selector. More information can be found at https://www.w3schools.com/cssref/sel_element_pluss.asp. For example:

.sf-with-ul:hover + .sub-menu { 
  display: block; 
  opacity: 1;
}

However, keep in mind that when you mouse out of an anchor element with the class sf-with-ul and try to click on a sub menu item, the entire submenu will disappear. To address this issue, consider applying the effect to the parent li element instead:

.menu-item.has-children-3:hover .sub-menu { 
  display: block; 
  opacity: 1;
}

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

Establishing the initial value for an input file form

Similar Question: Dynamically set value of a file input I'm currently working with an HTML form that includes a file input field, and I'm attempting to set the initial value for the file path in the form. I've tried changing the "value" ...

javascripthtml

Tips for implementing an if else statement in ReactJS while utilizing the useEffect hook

Below is the code snippet for returning a Plotly graph. I would like to display a message or alternative layout when there is no data available for the graph, such as showing "No data available". How can I achieve this? import React, { useEffect } from ...

javascriptreactjsjsonfrontendplotly.js

Tips for adjusting the height of both an iframe and a div to fit perfectly at 100% combined

Struggling to make an iframe and div both have 100% full height on the page? I need a footer menu with 280px height, leaving the rest of the page for the iframe. After extensive research, it seems like jQuery might be necessary as CSS Flex didn't wor ...

javascriptjqueryhtmlcssiframe

generate a JSON cookie using express

Having trouble creating a cookie in express 3.x. I'm attempting to set the cookie using the following JSON: res.cookie('cart', { styles: styles[product], count: 0, total: 0 }) The ...

javascriptjsonnode.jscookiesexpress

Is Your CanvasJS Chart Traveling in Reverse?

My charts are displaying dates in reverse order, can anyone help me figure out what's causing this issue? I've checked the documentation but couldn't find anything that would explain this problem. Link to documentation: Here is a screensh ...

javascriptcanvasjs

Error: The object does not contain the specified method

After deploying a web app to a remote host, I encountered an unusual error. Uncaught TypeError: Object #<error> has no method 'endsWith' Key Information: The application functions perfectly on my local machine as the host. The error ari ...

javascriptjqueryjquery-chosen

What is the best way to adjust and filter an array based on a single value?

Here is an array that needs to be modified: [ {name: "test", value: "test", group: 0}, {name: "test1", value: "test2", group: 0}, {name: "test3", value: "test3", group: 1}, {name: "te ...

javascripttypescript

Displaying client-side filtered rows in a jqGrid with postData filter upon initial loading

Our website includes a jqGrid that initially retrieves its rows using the built-in ajax fetch feature, returning a json object. We then apply filtering and searching on the client side by creating custom functions to generate postData filters. However, we ...

javascriptjqgridclient-side

Struggle with connecting to Firebase database

I've been grappling with errors while trying to build a list of users using Firebase's collection feature. I've provided the information I'm inputting below: This is my code snippet: const Signup = () => { const [err, setErr ...

javascriptreactjsfirebase-authentication

Using JavaScript to Access PHP Files

Would like to understand the process of calling a php file (test.php) from either "x:" or "y:" in the code below. var example1 = { x: ['giraffes', 'orangutans', 'monkeys'], y: [20, 14, 23], name: 'Most read', ...

javascriptphpvariables

Trouble getting search filter to function properly on an array of objects in a Vue JavaScript application

Can someone help me with integrating this code into my project? Here is the code I am referencing: http://jsfiddle.net/dkmmhf5y/701/ This snippet shows my JavaScript file, please disregard the 'test' data var app = new Vue ( { el: &apos ...

javascriptvue.js

Developing interconnected dynamic components in Angular

Can you help me figure out how to create nested dynamic components while maintaining the parent-child relationship? For instance, if I have data structured like this: - A --A.1 --A.2 -B --B.1 -C I want to build components that reflect this structure, su ...

javascriptangulartypescriptangular-dynamic-components

I noticed that my API call is being executed twice within the router function

In my NextJs project, I am utilizing Express for routing. I have implemented a router with a dynamic :id parameter which triggers an axios call to check the ID in the database. However, I am facing an issue where the API is being called twice when the :id ...

javascriptreactjsexpressnext.js

Using an AJAX function to retrieve data from two different server-side scripts and populate two separate HTML elements on the page

My goal in this coding situation is to change values in multiple DOM targets. The example from Tizag shows the DOM being altered within the onreadystatechange function, like this: if(ajaxRequest.readyState == 4){ document.myForm.time.value = ajaxRequ ...

javascriptajax

Disabling Navigation with Arrow Keys in Prettyphoto

Is there a way to prevent arrow keys from functioning in PrettyPhoto for a specific instance? I have tried using keyboard_shortcuts:false, but it still reloads the frame if left or right arrow keys are pressed, causing the form inside to reset. However, co ...

javascriptjquerykeyboard-shortcutsprettyphoto

Preserving input data based on click and change events

Upon form submission, I encounter an issue with displaying only the divs that contain fields with saved values. The form saves user-entered values using PHP, where some of the fields are initially hidden within div elements until an onclick or onchange eve ...

javascriptphphtmlforms

Tips for extracting values from a JSON object

I have been attempting to retrieve the value from an array without success. Here is the current array: [{0: {value: 2, label: "ARKANSAS"}}] When I try to use JSON.parse(object), I encounter the error VM20617: 1 Uncaught SyntaxError: Unexpected ...

javascriptreactjsreact-hooks

The moduleId in "Ng2SliderComponent" must be a valid string

My angularcli.json configuration looks like this: "scripts": [ "../node_modules/ng2-slider-component/ng2-slider.component.js", "../node_modules/ng2-slideable-directive/slideable.directive.js", "../node_modules/ng2-styled-directiv ...

javascriptangular

ES5 approach to Angular2 HTTP Providers (not TypeScript)

I'm currently developing an application and experimenting with Angular2 using ES5 JavaScript for fun. My main inquiry right now is how to access the Http service. Most of the available documentation is in TypeScript, which is not very helpful, or it p ...

javascriptangular

What impact does rotation have on an orthographic camera within the Three.js framework?

I am working in Three.js with a scene that includes a plane and an orthographic camera. Orthographic camera at -90deg: When the camera is rotated to -90 deg on the x-axis (looking straight down from above), only the plane is visible in the view. Scene s ...

javascriptvectorthree.jscameratrigonometry