Nested elements not transitioning using CSS

Why is my transition not being applied to the submenu <a> tag? The color change is working fine, but the transition does not occur on hover. When I use the same rules on another element with a different main class, it works perfectly. It seems like the issue lies with nested elements or CSS subclasses/selectors. Any suggestions?

Below is the structure of my HTML, JS, and CSS:

$( document ).ready(function() {
$('.menu_container').mouseover(function(e) {
   $('ul', this).show();
});
$('.menu_container').mouseout(function(e) {
   $('ul', this).hide();
});
});
.menu               { background:#f8f8f8; color:#707070; text-align:center; }
.menu li            { margin-bottom:0 }
.menu li            { display:inline-block; font-size:16px; border-top:2px solid #f8f8f8;  }
.menu li:hover      { background-color:#022a3b; background-color:#022a3b;   border-top:2px solid #06a7ea; text-decoration:none;}
.menu li a          { padding:13px 13px 16px 13px; display:block; text-decoration:none; color:#313131;  }
.menu li a:hover    { color:#06a7ea; }
.menu li span       { padding:13px 13px 16px 13px; display:block; text-decoration:none; color:#313131; cursor:pointer; }
.menu li span:hover { color:#06a7ea; }
.menu li.menu_container         { position:relative; display:inline-table; }
.menu li.menu_container ul      { display:none; position:absolute; top:51px; left:0; background:#022a3b; padding-left:0; padding:5px; }
.menu li.menu_container ul li   { display:table; max-width:200px; min-width:130px; text-align:left; border-top:none; margin-left:10px; }
.menu li.menu_container ul li a     { color:#FFFFFF; font-size:14px; padding:10px; transition:color 2s; }
.menu li.menu_container ul li a:hover   { color:#FF0000; }
<nav class="container-fluid menu">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/">Home</a></li>
        <li class="menu_container">
            <span>Home
                <ul>
                    <li><a href="/">Test</a></li>
                    <li><a href="/">Test</a></li>
                    <li><a href="/">Test</a></li>
                </ul>
            </span>
        </li>
    </ul>
</nav>

Check out the live example here.

htmlcsscss-transitions

Answer №1

Opt for jQuery's mouseenter and mouseleave events over mouseover and mouseout.

mouseover and mouseout trigger every time you move the cursor from one element to another within the .menu_container. Consequently, as you hover from one element to a submenu item, the inline style of the submenu ul toggles rapidly between display: none and display: block. This rapid change prevents the transition effect on the links.

You can check out an example illustrating the differences between these events in this jQuery page.

$( document ).ready(function() {
$('.menu_container').mouseenter(function(e) {
   $('ul', this).show();
});
$('.menu_container').mouseleave(function(e) {
   $('ul', this).hide();
});
});
.menu               { background:#f8f8f8; color:#707070; text-align:center; }
.menu li            { margin-bottom:0 }
.menu li            { display:inline-block; font-size:16px; border-top:2px solid #f8f8f8;  }
.menu li:hover      { background-color:#022a3b; background-color:#022a3b;   border-top:2px solid #06a7ea; text-decoration:none;}
.menu li a          { padding:13px 13px 16px 13px; display:block; text-decoration:none; color:#313131;  }
.menu li a:hover    { color:#06a7ea; }
.menu li span       { padding:13px 13px 16px 13px; display:block; text-decoration:none; color:#313131; cursor:pointer; }
.menu li span:hover { color:#06a7ea; }
.menu li.menu_container         { position:relative; display:inline-table; }
.menu li.menu_container ul      { display:none; position:absolute; top:47px; left:0; background:#022a3b; padding-left:0; padding:5px; }
.menu li.menu_container ul li   { display:table; max-width:200px; min-width:130px; text-align:left; border-top:none; margin-left:10px; }
.menu li.menu_container ul li a     { color:#FFFFFF; font-size:14px; padding:10px; transition:color 2s; }
.menu li.menu_container ul li a:hover   { color:#FF0000; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="container-fluid menu">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/">Home</a></li>
        <li class="menu_container">
            <span>Home
                <ul>
                    <li><a href="/">Test</a></li>
                    <li><a href="/">Test</a></li>
                    <li><a href="/">Test</a></li>
                </ul>
            </span>
        </li>
    </ul>
</nav>

Answer №2

It appears that your Javascript is causing issues with the menu display. However, you can achieve the same result using pure CSS by simply adding the following line:

.menu li.menu_container:hover ul { display: block; }

Since a hover event affects both the parent and child elements, this method works without the need for any JavaScript.

.menu               { background:#f8f8f8; color:#707070; text-align:center; }
.menu li            { margin-bottom:0 }
.menu li            { display:inline-block; font-size:16px; border-top:2px solid #f8f8f8;  }
.menu li:hover      { background-color:#022a3b; background-color:#022a3b;   border-top:2px solid #06a7ea; text-decoration:none;}
.menu li a          { padding:13px 13px 16px 13px; display:block; text-decoration:none; color:#313131;  }
.menu li a:hover    { color:#06a7ea; }
.menu li span       { padding:13px 13px 16px 13px; display:block; text-decoration:none; color:#313131; cursor:pointer; }
.menu li span:hover { color:#06a7ea; }
.menu li.menu_container         { position:relative; display:inline-table; }
.menu li.menu_container ul      { display:none; position:absolute; top:47px; left:0; background:#022a3b; padding-left:0; padding:5px; }
.menu li.menu_container:hover ul { display: block; }
.menu li.menu_container ul li   { display:table; max-width:200px; min-width:130px; text-align:left; border-top:none; margin-left:10px; }
.menu li.menu_container ul li a     { color:#FFFFFF; font-size:14px; padding:10px; transition:color 2s; }
.menu li.menu_container ul li a:hover   { color:#FF0000; }
<nav class="container-fluid menu">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/">Home</a></li>
        <li class="menu_container">
            <span>Home
                <ul>
                    <li><a href="/">Test</a></li>
                    <li><a href="/">Test</a></li>
                    <li><a href="/">Test</a></li>
                </ul>
            </span>
        </li>
    </ul>
</nav>

Answer №3

Insert

transition: color 2s;

within the style rule for:

.menu li.menu_container ul li a:hover

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

What is the best way to determine which id has been clicked using jQuery?

Can someone help me figure out how to determine which button has been clicked using jQuery? Here is the HTML code I am working with: <div class="row"> <div class="col-md-6"> <div class="well " id="option_a"> </div& ...

javascriptjqueryhtmltwitter-bootstrap

`CSS animation for vanishing line effect`

I want to create an animated logo that gives the illusion of being pulled up by a rope, represented by a vertical black line, from the bottom of the page to the top. As the logo moves upwards, I would like the rope to disappear behind it, but I'm uns ...

javascriptcss

Is there a way to make the onKeyDown event function properly in Next.js/React?

I'm currently developing a website with Next.js and am facing an issue trying to execute a simple function when a key is pressed. Strangely, the onKeyDown event isn't getting triggered as expected in my code snippet: <main onKeyDown={e => c ...

javascripthtmlreactjsnext.jsreact-component

Tips for adding a CSS marker to the Videogular timeline at a designated time

My HTML player application allows users to search for a term and then displays the results along with the time when those words appear. By clicking on a specific sentence, the HTML player will start playing from that location. However, I would like to enha ...

javascripthtmlcssangularjsvideogular

I have configured my CSS styles in the module.css file of my Next.js application, but unfortunately, they are not being applied

I recently developed a nextjs with electron template application: Here is the link to my code on CodeSandbox: https://codesandbox.io/s/sx6qfm In my code, I have defined CSS classes in VscodeLayout.module.css: .container { width: '100%'; he ...

cssreactjsnext.js

React JS - Large image failing to display entirely

I'm currently facing challenges with displaying my image in full size. I am unsure what is causing this issue and would appreciate any guidance on correcting my approach. The specific image I am attempting to display at full-size can be found Howeve ...

cssreactjs

Newbie: Troubleshooting Vue Errors - "Vue is not recognized"

I'm currently at the beginning stages of learning Vue and am practicing implementing it. However, I keep encountering the errors "vue was used before it was defined" and "Vue is not defined". Below are excerpts from my HTML and JS files for reference. ...

javascripthtmlvue.js

Maxlength and Minlength attributes are not considered when using input type=“number”

Why is the maxlength attribute not functioning properly for this input element? <input type="number" maxlength="5" maxlength="10" /> ...

javascripthtmlangularjsweb-deployment

Is the DOMContentLoaded event connected to the creation of the DOM tree or the rendering tree?

After profiling my app, I noticed that the event is triggered after 1.5 seconds, but the first pixels appear on the screen much later. It seems like the event may only relate to DOM tree construction. However, this tutorial has left me feeling slightly con ...

javascripthtml

Retrieve the value of a variable by using either an HTTP GET or POST request

Here's the HTML code snippet that I'm working with: <head> <h1>Sample Page</h1> </head> <body> <form method="POST" action=""> Enter Keyword <input type="text" name="key"> ...

javascriptpythonhtmlhttp

Center a span vertically inside a div as the text within the span grows to occupy the entire div

I am facing an issue with a table that has 25 td's. Each td contains specific elements as shown below: <td> <div> <span> text </span> </div> </td> Additionally, there is a script in place that adj ...

javascriptjquerycss

Resize the shape of an image's polygon

Is there a way to independently scale a specific polygon of an image on hover? For example, I have a world map and I would like to enlarge a country when hovering over it, then return it to its original size when no longer hovering. I am familiar with us ...

javascriptjqueryhtmlcssimage

IE browser transparency effect on canvas

I have encountered an issue when drawing a shape on canvas using kineticJS and setting the fill to none. The code snippet I am using is below: var rect = new Kinetic.Path({ x: 0, y: 0, data: 'm 2.0012417,2.0057235 ...

javascripthtmlcanvastransparencykineticjs

Combining an image seamlessly with the background color in HTML

I'm having an issue with my HTML page where the background color is red. I've posted two images - one blends in perfectly with the background while the other creates white patches. How can I fix this problem? Check out the Fiddle Link for refere ...

htmlcssimagepngjpeg

iPhone failing to interpret HTML entities

I am currently developing a website for a client, who is facing a bug that I have not been able to replicate... For reference, here is an example page: The issue my client is experiencing involves using an iPhone to navigate the website. It appears that ...

iphonehtmlangularjs

Utilizing JQuery for adjusting the CSS top property

I needed to overlay text on an image, so I used CSS for this purpose. However, as I incorporated Bootstrap and hesitated to include absolute positioning in the CSS file, I faced issues with centering the text when resizing the image. To tackle this problem ...

jquerycss

Click on a div to smoothly scroll to the top, then automatically scroll to the bottom if already at the top position

I've implemented a JQuery code on my website that allows the page to scroll to the top when clicking on a div with the class of .bottom. The code is working perfectly fine, here it is: function scrollToTop(){ $('.bottom').click(function ...

javascriptjquerycssjquery-animatescrolltop

The ejs file is failing to load the css file

I'm facing an issue where my layout.ejs file is not loading the style.css file. I've been searching endlessly for a solution, trying various fixes and meticulously checking for typos. Despite the correct path shown in the network tab when inspect ...

cssnode.jsexpressejs

Grid system that adapts without distortion

My goal is to create a grid that maximizes the number of elements in its width without stretching them to fit the entire window. That's why I'm utilizing CSS grid with the auto-fill property, which is almost achieving the desired outcome. I want ...

htmlcssgrid

Determine the selected radio button

----EDIT---- I am developing a jQuery mobile application and I need to determine which radio button is selected. This is the JavaScript code I'm using: function filter(){ if(document.getElementById('segment1').checked) { aler ...

javascripthtmlcssjquery-mobile