Nested div CSS transition not working

Question

0.00/5 (No votes)

See more:

Hi
I have a navigation bar with a dropdown on one of the nav_items. Each nav_item has a CSS transition on its color property, and the same for the child elements in the dropdown. However, the children's transitions don't work and the color changes immediately.

HTML

<div class="container nav_grid" id="nav_grid">
        <div class="nav_items" id="nav_items">
                <div class="nav_item" id="home">HOME</div>
                <div class="nav_item dropdown_parent_outer" id="products">
                        PRODUCTS
                        <div class="dropdown_menu outer_dropdown" id="products_menu">
                                <div class="dropdown_item dropdown_parent_outer" id="phone_numbers">
                                        Phone Numbers
                                        <div class="dropdown_menu outer_dropdown" id="phone_numbers_menu">
                                                <div class="dropdown_item">UK Geographic Numbers</div>
                                                <div class="dropdown_item">UK Non-Geographic Numbers</div>
                                                <div class="dropdown_item">International Numbers</div>
                                                <div class="dropdown_item">Number Porting</div>
                                                <div class="dropdown_item">Number Rangeholder Lookup</div>
                                                <div class="dropdown_item">TPS Lookup</div>
                                                <div class="nav_spacer"></div>
                                        </div>
                                </div>
                                <div class="dropdown_item dropdown_parent_outer">
                                        Business Broadband
                                        <div class="dropdown_menu outer_dropdown">
                                                <div class="dropdown_item">ADSL</div>
                                                <div class="dropdown_item">FTTC</div>
                                                <div class="dropdown_item">PDSL Phone Broadband</div>
                                                <div class="nav_spacer"></div>
                                        </div>
                                </div>
                                <div class="nav_spacer"></div>
                        </div>
                </div>
                <div class="nav_item">SUPPORT</div>
                <div class="nav_item">CONTACT</div>
                <div class="nav_item">RESELLING</div>
                <div class="nav_item">WEB PORTAL</div>
        </div>
</div>

CSS

.dropdown_item
{
        padding: 0 0 0 14px;
        font-size: 13px;
        border-top: 1px solid rgb(80,80,80);
        background-color: inherit;
        color: rgb(200,200,200);
        transition: color 0.5s; /* doesn't work, no idea why */
}

JavaScript

$(".dropdown_item").mouseover(function(e)
{
        $(this).css("color", "rgb(102,183,226)");
});

$(".dropdown_item").mouseout(function(e)
{
        $(this).css("color", "rgb(200,200,200)");
});

What I have tried:

---------------------------------------------------------------------------------------------

Posted 22-Nov-17 0:27am

User 13204940

Updated 22-Nov-17 6:41am

Add a Solution

Comments

Laxmidhar tatwa technologies 23-Nov-17 7:48am

the above code works well
only add the script of jquery-1.10.0.min.js

and then add the within document.ready function like bellow

$(document).ready(function () {
$(".dropdown_item").mouseover(function (e) {
$(this).css("color", "rgb(102,183,226)");
});

$(".dropdown_item").mouseout(function (e) {
$(this).css("color", "rgb(200,200,200)");
});
});

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2017-11-22T06:41:00

Solution 1

As I said yesterday[^], don't use Javascript / jQuery for simple animations.

Using the :hover pseudo-class works perfectly well, keeping the parent item highlighted when a child item is hovered.

Demo: JSFiddle[^]

Posted 22-Nov-17 6:41am

Richard Deeming

Comments

[no name] 23-Nov-17 4:47am

Now I've moved all of the color animations to css, but the transition still happens immediately. I'll work on getting the website publicly available so you can have a look.