CSS transition does not work with nested elements

My transition does not apply to the submenu tag <a>. The color change succeeds, but the transition does not work on hover. If I apply the same rules, then it works well for another element with the main class. The problem is with CSS nested elements or subclasses / selectors. Any ideas?

I have the following HTML, JS structure 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>
Run codeHide result

Real-time example: http://thyalie.ro/casedevanzareoradea/

+4
source share
3 answers

Use jQuery events mouseenterand mouseleave, instead of mouseoverand mouseout.

mouseover mouseout , .menu_container. , , ul display: none display: block. , .

jQuery .

$( 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>
Hide result
+1

Javascript, , . javascript, CSS, :

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

, , JS.

.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>
Hide result
+1

Add

transition: color 2s;

to

.menu li.menu_container ul li a:hover
-1
source

Source: https://habr.com/ru/post/1629008/


All Articles