我正在尝试实现一个普通的js / jquery过滤器以及一堆缩略图，这些缩略图会在鼠标悬停时显示图像，我发现它比我预期的更令人沮丧。
jQuery(document).ready(function($) {
$(function() {
var selectedClass = "";
$(".fil-cat").click(function() {
selectedClass = $(this).attr("data-rel");
$("#portfolio").fadeTo(100, 0.1);
$("#portfolio div").not("." + selectedClass).fadeOut().removeClass('scale-anm');
setTimeout(function() {
$("." + selectedClass).fadeIn().addClass('scale-anm');
$("#portfolio").fadeTo(300, 1);
}, 300);
});
});
});#portfolio {
margin: 1rem 0;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 1rem;
-moz-column-gap: 1rem;
column-gap: 1rem;
-webkit-column-width: 33.33333333333333%;
-moz-column-width: 33.33333333333333%;
column-width: 33.33333333333333%;
}
.tile {
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition: all 350ms ease;
transition: all 350ms ease;
}
.tile:hover {}
.scale-anm {
transform: scale(1);
}
.tile img {
max-width: 100%;
width: 100%;
height: auto;
margin-bottom: 1rem;
}
::-moz-focus-inner {
border: 0;
padding: 0;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.tile:hover .overlay {
height: 100%;
}
.btn {
font-family: Roboto;
font-size: 1rem;
font-weight: normal;
text-decoration: none;
cursor: pointer;
display: inline-block;
line-height: normal;
padding: .5rem 1rem;
margin: 0;
height: auto;
border-bottom: 3px solid #EA5A28;
vertical-align: middle;
-webkit-appearance: none;
color: White;
background-color: black;
border-radius: 0;
}
.btn:hover {
text-decoration: none;
border-bottom: 3px solid #EA5A28;
}
.btn:focus {
outline: none;
border-color: var(--darken-2);
-webkit-box-shadow: 0 0 0 3px var(--darken-3);
box-shadow: 0 0 0 3px var(--darken-3);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn fil-cat" href="" data-rel="all">All</button>
<button class="btn fil-cat" href="" data-rel="featured">Featured</button>
<button class="btn fil-cat" href="" data-rel="brandidentity">Brand Identity</button>
<button class="btn fil-cat" href="" data-rel="brandinteriors">Brand Interiors</button>
<button class="btn fil-cat" data-rel="online">Online</button>
<button class="btn fil-cat" data-rel="overseas">Overseas</button>
<button class="btn fil-cat" data-rel="print">Print</button>
<div style="clear:both;"></div>
<div id="portfolio">
<div class="tile scale-anm web all featured overseas">
<a href="https://thoughtpencil.com/fabercastell/">
<img src="https://thoughtpencil.com/portfolioassets/cover/overseas-fabercastell-cover.jpg" alt="" />
</a>
<div class=" overlay">
<img src="https://thoughtpencil.com/portfolioassets/cover/portfolio tags-13.jpg" alt="Avatar" class="">
</div>
</div>
<div class="tile scale-anm web all featured brandidentity brandinteriors">
<a href="https://thoughtpencil.com/baako/">
<img src="https://thoughtpencil.com/portfolioassets/cover/branded-baako-cover.jpg" alt="" />
</a>
<div class=" overlay">
<img src="https://thoughtpencil.com/portfolioassets/cover/portfolio tags-06.jpg" alt="Avatar" class="">
</div>
</div>
<div class="tile scale-anm web all featured brandidentity brandinteriors print online">
<a href="https://thoughtpencil.com/lvb/">
<img src="https://thoughtpencil.com/portfolioassets/cover/brand-lvb-cover.jpg" alt="" />
</a>
<div class=" overlay">
<img src="https://thoughtpencil.com/portfolioassets/cover/portfolio tags-03.jpg" alt="Avatar" class="">
</div>
</div>
<div class="tile scale-anm web all featured brandidentity">
<a href="https://thoughtpencil.com/crown/">
<img src="https://thoughtpencil.com/portfolioassets/cover/brand-crown-cover.jpg" alt="" />
</a>
<div class=" overlay">
<img src="https://thoughtpencil.com/portfolioassets/cover/portfolio tags-02.jpg" alt="Avatar" class="">
</div>
</div>
<div class="tile scale-anm web all featured online">
<a href="https://thoughtpencil.com/monks/">
<img src="https://thoughtpencil.com/portfolioassets/cover/online-monks-cover.jpg" alt="" />
</a>
<div class=" overlay">
<img src="https://thoughtpencil.com/portfolioassets/cover/portfolio tags-10.jpg" alt="Avatar" class="">
</div>
</div>
<div class="tile scale-anm web all online featured ">
<a href="https://thoughtpencil.com/plush/">
<img src="https://thoughtpencil.com/portfolioassets/cover/online-plush-cover.jpg" alt="" />
</a>
<div class=" overlay">
<img src="https://thoughtpencil.com/portfolioassets/cover/portfolio tags-12.jpg" alt="Avatar" class="">
</div>
</div>
<div class="tile scale-anm web all online">
<a href="https://thoughtpencil.com/pamperazi/">
<img src="https://thoughtpencil.com/portfolioassets/cover/online-pamperazi-cover.jpg" alt="" />
</a>
<div class=" overlay">
<img src="https://thoughtpencil.com/portfolioassets/cover/portfolio tags-11.jpg" alt="Avatar" class="">
</div>
</div>
<div class="tile scale-anm web all overseas">
<a href="https://thoughtpencil.com/koba/">
<img src="https://thoughtpencil.com/portfolioassets/cover/overseas-kobabatteries-cover.jpg" alt="" />
</a>
<div class=" overlay">
<img src="https://thoughtpencil.com/portfolioassets/cover/portfolio tags-15.jpg" alt="Avatar" class="">
</div>
</div>
<div class="tile scale-anm web all online">
<a href="https://thoughtpencil.com/kck/">
<img src="https://thoughtpencil.com/portfolioassets/cover/online-kck-cover.jpg" alt="" />
</a>
<div class=" overlay">
<img src="https://thoughtpencil.com/portfolioassets/cover/portfolio tags-09.jpg" alt="Avatar" class="">
</div>
</div>
<div class="tile scale-anm web all overseas">
<a href="https://thoughtpencil.com/micromax/">
<img src="https://thoughtpencil.com/portfolioassets/cover/overseas-micromax-cover.jpg" alt="" />
</a>
<div class=" overlay">
<img src="https://thoughtpencil.com/portfolioassets/cover/portfolio tags-16.jpg" alt="Avatar" class="">
</div>
</div>
<div class="tile scale-anm web all overseas">
<a href="https://thoughtpencil.com/mitsubishi/">
<img src="https://thoughtpencil.com/portfolioassets/cover/overseas-mitsubishi-cover.jpg" alt="" />
</a>
<div class=" overlay">
<img src="https://thoughtpencil.com/portfolioassets/cover/portfolio tags-17.jpg" alt="Avatar" class="">
</div>
</div>
<div class="tile scale-anm web all overseas">
<a href="https://thoughtpencil.com/sony/">
<img src="https://thoughtpencil.com/portfolioassets/cover/overseas-sony-cover.jpg" alt="" />
</a>
<div class=" overlay">
<img src="https://thoughtpencil.com/portfolioassets/cover/portfolio tags-14.jpg" alt="Avatar" class="">
</div>
</div>
</div>
<div style="clear:both;"></div>
最初，悬停按钮在过滤器之后不起作用，因此我对它们应用了比例变换，但是现在它们没有滚动到div的顶部。
此外-底部元素上的悬停似乎不起作用，我不确定为什么。
供参考-我正在尝试实现以下目标：
但是我遇到一个错误，该错误使鼠标悬停看起来像这样
任何输入将不胜感激。
这是我的小提琴：https://jsfiddle.net/4jLbz1tc/
编辑：
这是我正在测试的地方