Question

我正在使用材质设计精简版来创建菜单。根据文档，单击图标打开菜单。但是，我需要在鼠标悬停时打开菜单

以下是菜单的代码

＆＃13;

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

<button id="demo-menu-lower-left" class="mdl-button mdl-js-button mdl-button--icon">
      <i class="material-icons">more_vert</i>
    </button>

<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="demo-menu-lower-left">
  <li class="mdl-menu__item">Some Action</li>
  <li class="mdl-menu__item mdl-menu__item--full-bleed-divider">Another Action</li>
  <li disabled class="mdl-menu__item">Disabled Action</li>
  <li class="mdl-menu__item">Yet Another Action</li>
</ul>

＆＃13;

此外，任何人都可以告诉我如何使用 Material Design Lite

创建megg菜单，如link

Answer 1

对于菜单点击事件已经写入，因此您可以在鼠标上下使用相同的事件。请参阅更新的按钮元素。

＆＃13;

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

<button id="demo-menu-lower-left" class="mdl-button mdl-js-button mdl-button--icon" onmouseover="this.click()" onmouseout="this.click()">
      <i class="material-icons">more_vert</i>
    </button>

<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="demo-menu-lower-left">
  <li class="mdl-menu__item">Some Action</li>
  <li class="mdl-menu__item mdl-menu__item--full-bleed-divider">Another Action</li>
  <li disabled class="mdl-menu__item">Disabled Action</li>
  <li class="mdl-menu__item">Yet Another Action</li>
</ul>

＆＃13;

将鼠标移出和移出事件到javascript函数以获得更多控制权。

注意：我不是UI开发人员，因此可能不是最佳解决方案。

如何在鼠标悬停时打开材料设计菜单

1 个答案: