Materialize 物化css悬停效果无法正常工作

尝试为包含img的div添加悬停效果，类：

materialboxed

不幸的是，它没有协同工作。 有什么想法吗？ <

标题
描述

好的，这里有几处错误：

1） 您还没有包括jQuery，但您正在尝试使用jQuery初始化materialbox。因此，要么将jQuery包含在项目/笔中，要么根据

下面是一个使用jQuery的代码笔，并做了一些修改

2） 如果查看代码，在脚本之前的底部有一个随机图像：

<div class="masonry tiles">
                     <div class="col s4 tile gallery item">
             <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/216995/1.jpg" alt="" class="materialboxed responsive-img">
                             <div class="details">
                                 <span class="title">Title</span>
                                 <span class="description">Description</span>
                             </div>
                     </div>
                 </div>
<!-- What is this image? -->
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/216995/1.jpg" alt="" class="materialboxed responsive-img">

---

我真的不确定你想要实现什么。希望这能有所帮助。

嘿。你能举一个你想要达到的目标的例子吗？或者更清楚地描述它？嗨！很抱歉移植不好。我正在尝试将悬停效果（你可以看到tiles div）放在materialboxed的顶部。但看起来他们并不是真的很般配。框中的材质无法正常工作。因此，我认为当tiles div中有多个图像时，问题就开始了，看起来这些图像只是相互重叠。知道吗？是不透明度：0.99；在地板上。瓷砖。瓷砖。谢谢

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.materialboxed');
    var instances = M.Materialbox.init(elems);
  });

  // Or with jQuery

  $(document).ready(function(){
    $('.materialboxed').materialbox();
  });

<div class="masonry tiles">
                     <div class="col s4 tile gallery item">
             <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/216995/1.jpg" alt="" class="materialboxed responsive-img">
                             <div class="details">
                                 <span class="title">Title</span>
                                 <span class="description">Description</span>
                             </div>
                     </div>
                 </div>
<!-- What is this image? -->
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/216995/1.jpg" alt="" class="materialboxed responsive-img">

.materialboxed {
  width:100%;
}