实现框架问题

【问题标题】：Materialize framework problems实现框架问题
【发布时间】：2015-07-25 12:14:06
【问题描述】：

我有这个简单的 div：

<div class="container">
  <div class="hoverable col s12 l4 m4">
    Hoverable div.
  </div>
</div>

悬停效果在鼠标离开时不起作用，而在鼠标悬停时起作用。

虽然我使用 l4 和 m4 类，但 div 在我的笔记本电脑屏幕上仍然占据 12 列。

jsfiddle

【问题讨论】：

标签： css materialize

【解决方案1】：

您需要将列放在一行中。像这样：

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css" rel="stylesheet"/><script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"></script>
<div class="container">
    <div class="row">
        <div class="hoverable col s12 m4 l4">Hoverable div.</div>
    </div>
</div>

编辑：您必须添加以下 css：

.hoverable{
    transition: box-shadow 0.25s ease 0s;
}

【讨论】：

谢谢。这解决了网格系统问题，但鼠标离开时悬停效果仍然无效。