物化框架问题

Question

我有这个简单的 div:

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

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

虽然我使用 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;
}

物化框架问题

Materialize framework problems

css

materialize