gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 09:51:42 27 4
gpt4 key购买 nike

我在鼠标悬停时遇到可展开和可折叠菜单的问题,我有这样的代码:

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 .

最佳答案

我还可以通过将 ng-mouseover="showMenu=true" 添加到 dashboard-menu 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>

关于css - 在 angular.js 中悬停时可展开菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39041320/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com