Question

我正在尝试使用彩色叠加层创建一个可过滤的投资组合，以显示项目的标题，例如：

叠加示例： https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade

但是，当我尝试将其应用于我的投资组合代码时，过滤器不起作用。

投资组合代码：https://codepen.io/ford1234/pen/xLPELL

<div class="toolbar mb2 mt2">
<button class="pbtn fil-cat" href="" data-rel="all">All</button>
<button class="pbtn fil-cat" data-rel="live">Live</button>
<button class="pbtn fil-cat" data-rel="projects">Projects</button>
<button class="pbtn fil-cat" data-rel="events">Events</button>
</div> 

<div style="clear:both;"></div> 
<div id="portfolio">
<div class="tile scale-anm live all">
<img src="https://dev.dcrc.org.uk/wp-content/uploads/2017/08/autonomy-and-
automation.jpg" alt="">
</div>
<div class="tile scale-anm projects all">
<a href="#"><img src="http://dev.dcrc.org.uk/wp-content/uploads/2017/08/diy-
citizenship-crop.jpg" alt="" /></a>
</div>
<div class="tile scale-anm events all">
<a href="#"><img src="http://dev.dcrc.org.uk/wp-
content/uploads/2017/08/pervasive-media-cookbook-2.jpg" alt="" /></a>
 </div>
 <div class="tile scale-anm live all">
 <a href="#"><img src="http://dev.dcrc.org.uk/wp-
content/uploads/2017/08/amb-lit.jpg" alt="" /></a>
 </div>




</div>

<div style="clear:both;"></div>

先谢谢，我陷入困境！

Answer 1

您没有包含jQuery（或者没有正确包含它）。一旦包含jQuery，它就完全是必需的。

在CodePen中，您可以转到CodePen中的Javascript设置并从“快速添加”下拉列表中选择jQuery，但是您需要检查它在本地文件中不起作用的原因。确保它包含正确，并且版本与您的代码兼容。以下是适用于CodePen的版本：

<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

具有标题覆盖的可过滤投资组合

1 个答案: