html – CSS Transition不能处理嵌套项目

概述我的转换不适用于子菜单< a>标签.颜色变化效果很好,但悬停时不会触发转换.如果我应用相同的规则,在具有主类的另一个元素上,它运行良好.问题在于嵌套元素或CSS子类/选择器.有任何想法吗？ 我有以下HTML,JS结构和& CSS： $( document ).ready(function() { $('.menu_container').mouseover(function(e) { 我的转换不适用于子菜单< a>标签.颜色变化效果很好,但悬停时不会触发转换.如果我应用相同的规则,在具有主类的另一个元素上,它运行良好.问题在于嵌套元素或CSS子类/选择器.有任何想法吗？

我有以下HTML,Js结构和& 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 >    <ul>        <li><a href="/">Home</a></li>        <li><a href="/">Home</a></li>        <li >            <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>

实例：http://thyalie.ro/casedevanzareoradea/

解决方法 使用jquery的mouseenter和mouseleave事件而不是mouSEOver和mouSEOut.

每次在.menu_container中从一个元素悬停到另一个元素时,mouSEOver和mouSEOut就会触发.因此,当您从一个元素悬停到子菜单项时,子菜单的内联样式将从display：none快速更改为display：block.这会导致链接上的转换不生效.

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 >    <ul>        <li><a href="/">Home</a></li>        <li><a href="/">Home</a></li>        <li >            <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>

总结

以上是内存溢出为你收集整理的html – CSS Transition不能处理嵌套项目全部内容，希望文章能够帮你解决html – CSS Transition不能处理嵌套项目所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。