Question

我的转换不适用于子菜单<a>标记。颜色变化效果很好，但悬停时不会触发转换。如果我应用相同的规则，在具有主类的另一个元素上，它运行良好。问题在于嵌套元素或CSS子类/选择器。有什么想法吗？

我有以下HTML，JS结构＆amp; CSS：

＆＃13;

$( document ).ready(function() {	
	$('.menu_container').mouseover(function(e) {
   	$('ul', this).show();
});
	$('.menu_container').mouseout(function(e) {
   	$('ul', this).hide();
});
});

＆＃13;

.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; }

＆＃13;

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

＆＃13;

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

Answer 1

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

每次您在mouseover内从一个元素悬停到另一个元素时，

mouseout和.menu_container都会触发。因此，当您从一个元素悬停到子菜单项时，子菜单ul的内联样式正在从display: none快速更改为display: block。这会导致链接上的转换不生效。

This jQuery page举例说明了事件之间的差异。

＆＃13;

$( document ).ready(function() {	
	$('.menu_container').mouseenter(function(e) {
   	$('ul', this).show();
});
	$('.menu_container').mouseleave(function(e) {
   	$('ul', this).hide();
});
});

＆＃13;

.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; }

＆＃13;

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

＆＃13;

Answer 2

您的Javascript似乎在干扰正确显示您的菜单。您不需要任何javascript来完成这项工作，但是，您可以在纯CSS上执行此操作，方法是添加以下行：

With TabControl1
    .Appearance = TabAppearance.FlatButtons
    .ItemSize = New Size(0, 1)
    .SizeMode = TabSizeMode.Fixed
End With

因为悬停在父母身上盘旋，所以这很好，不需要任何JS。

＆＃13;

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

＆＃13;

.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; }

＆＃13;

Answer 3

添加

transition: color 2s;

到

.menu li.menu_container ul li a:hover

CSS Transition无法处理嵌套项目

3 个答案: