菜单中angular.js

我有鼠标悬停扩张和收缩的菜单问题上悬停可扩展的，我有这样的代码：菜单中angular.js

HTML：

<div ng-mouseout="showMenu=false" class="dashboard-menu"> 
     <div ng-show="showMenu" class="sub-menu"> 
     <ul> 
      <li><a class="lighting"><span>Add an action</span><span class="icon"></span></a></li> 
      <li><a class="html"><span>Add HTML/JS</span><span class="icon"></span></a></li> 
      <li><a class="image"><span>Add an image</span><span class="icon"></span></a></li> 
     </ul> 
     </div> 
     <div ng-mouseover="showMenu=true"><span class="icon plus"></span></div> 
    </div>

CSS：

.icon { 
    width: 60px; 
    height: 60px; 
    display: inline-block; 
    background: #000; 
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    border-radius: 50%; 
} 
.plus { 
    float: right; 
} 
.dashboard-menu { 
    position: fixed; 
    bottom: 10px; 
    right: 10px; 
}

为什么菜单隐藏，当我离开.plus图标？如何解决它？这是一个plunker。

来源

2016-08-19 jcubic

使用ng-mouseleave修复了这个问题。

来源

2016-08-19 14:26:07 jcubic

我还能够通过将ng-mouseover="showMenu=true"添加到仪表板菜单div来让您的代码正常工作。

<body ng-app> 
    <div class="dashboard-menu" ng-mouseover="showMenu=true" ng-mouseout="showMenu=false"> 
     <div ng-show="showMenu" class="sub-menu"> 
     <ul> 
      <li><a class="lighting"><span>Add an action</span><span class="icon"></span></a></li> 
      <li><a class="html"><span>Add HTML/JS</span><span class="icon"></span></a></li> 
      <li><a class="image"><span>Add an image</span><span class="icon"></span></a></li> 
     </ul> 
     </div> 
     <div ng-mouseover="showMenu=true"><span class="icon plus"></span></div> 
    </div> 
    </body>

来源

2016-08-19 14:30:30

“showmenu =真”的作品，但那时，我不知道你为什么会想一个菜单贴在那里，当意图是它自动隐藏，我真的不明白这家伙是问 – Ricky

@Ricky他由于鼠标离开按钮显示菜单时菜单会隐藏，因此在执行任何操作之前，菜单自动隐藏都会遇到麻烦。 –

菜单中angular.js

回答

相关问题