Question

我在鼠标悬停时有可扩展和可折叠菜单的问题，我有这样的代码：

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。

Answer 1

我还可以通过将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>

Answer 2

使用ng-mouseleave解决了问题。

菜单在angular.js中悬停时可展开

2 个答案: