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

Question

我正在使用 Material Design lite 创建菜单。根据文档，单击图标会打开菜单。但是，我需要在鼠标悬停时打开菜单

这里是菜单的代码

<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>

另外，谁能告诉我如何使用 Material Design Lite

创建像 link 这样的大型菜单

Answer 1

对于菜单点击事件已经写好了，所以你可以在鼠标悬停时使用相同的事件。查看更新的按钮元素。

<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>

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

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