CSS 过渡不适用于嵌套项

我的转换不适用于子菜单<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 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>

现场示例：http://thyalie.ro/casedevanzareoradea/

使用 jQuery 的 mouseenter 和 mouseleave 事件，而不是 mouseover 和 mouseout 。

每次.menu_container内从一个元素悬停到另一个元素时，都会mouseover和mouseout触发。因此，当您将鼠标悬停在一个元素到子菜单项时，子菜单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>

您的 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>

添加

transition: color 2s;

自

.menu li.menu_container ul li a:hover

相关内容

最新更新

热门标签：