实现框架问题

Question

我有这个简单的div：

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

当鼠标悬停时，hoverable效果对鼠标离开不起作用。

当我使用l4和m4类时，div在我的笔记本电脑屏幕上仍然需要12列。

jsfiddle

Answer 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;
}