显示子菜单中徘徊，但不隐藏时未徘徊

HTML：

<ul class="multilevel"> 
<li>...</li> 
<li>...</li> 
<li>...</li> 
<li> 
    <ul> 
     <li>...</li> 
     <li>...</li> 
     <li>...</li> 
    </ul> 
</li> 
</ul>

CSS：

.multilevel > li {position: relative; display: inline-block} 
.multilevel ul {display: none; position: absolute;} 
.multilevel > li:hover ul {display: block;}

当悬停时，我想让子菜单保持不动并不隐藏。是否有可能使用CSS？或者我需要使用jQuery（在我的情况下）。如果是的话，我该如何使用jQuery，以便在用css悬停时菜单保持不变？

来源

2015-04-18 Marco

如果使用opacity，而不是你能做到这一点display

.multilevel > li { 
 
    position: relative; 
 
    display: inline-block 
 
} 
 
.multilevel ul { 
 
    opacity:0; 
 
    position: absolute; 
 
    transition:0s 100s; 
 
} 
 
.multilevel > li:hover ul { 
 
    opacity:1; 
 
    transition:0s; 
 
}

<ul class="multilevel"> 
 
    <li>...</li> 
 
    <li>...</li> 
 
    <li>...</li> 
 
    <li>Hover 
 
     <ul> 
 
      <li>...</li> 
 
      <li>...</li> 
 
      <li>...</li> 
 
     </ul> 
 
    </li> 
 
</ul>

它延长了悬停效果I SE t它到100s，你可以随意更改它

来源

2015-04-18 11:23:58 Akshay

确实很好做。如果可以的话，我会加倍投票。 – Shaggy

@Shaggy谢谢你可以改变效果到1000s或东西，使它总是出现 – Akshay

是的，最好将延迟设置为可笑的高点。根据布局，您可能还需要将子菜单置于屏幕外，直到它被激活，所以它不会阻止任何后面的项目操作。 – Shaggy

有没有明确的属性，如在CSS.You的mouseenter /鼠标离开可以，而使用jquery MouseEnter事件显示内UI元素：

$('.multilevel > li').mouseenter(function(){ 
    $(this).find('ul').show(); 
});

来源

2015-04-18 11:07:54

显示子菜单中徘徊，但不隐藏时未徘徊

回答

相关问题