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

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 开发人员，所以这可能不是最佳解决方案。

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

How to open material design menu on mouse hover

javascript

jquery

css

material-design

material-design-lite