我可以在匹配的 Children 中使用 jQuery

Question

我尝试做一些幻灯片 in/out 每个网格项目的 Child 元素。

我尝试将 $.target.children[0] 作为 jQuery 元素来处理，例如使用 .show() 和 .hide()。

 /*--------- Product Card Overlay -------------------------------------*/

   $(".products-grid").children().hover(function ($) {

       /*------ MOUSE IN --------*/

       match an animate in the child element (div.overlay)

   }, function () {

       /*------ MOUSE OUT --------*/
       match an animate out the child element (div.overlay)
   });

/*--------- /Product Card Overlay ----------------------------------*/

其实我卡住了，我的大脑崩溃了。谁能给我一些正确方法的提示？

Answer 1

也许这会对您有所帮助。请注意第一个项目如何 display:none，也就是说，如果您需要最初隐藏叠加层。

如果您更愿意在 css 中制作动画，您可以使用 .toggleClass() 和 .active class 而不是 .toggle()。 16=]

希望对您有所帮助！

.products-grid {
  display: flex;
  flex-wrap: wrap;
  width: 75%;
  margin: 0 auto;
  
}
.products-grid .product {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 35%;
  max-width: 35%;
  background-color: red;
  margin: 0 7.5px 15px 7.5px;
  height: 200px;
  overflow: hidden;
}

.products-grid .product .prod-details {
  position: absolute;
  top: 100%;
  opacity: 0;
  margin: 0 auto;
  width: 50%;
  height: 50%;
  background-color: blue;
  transition: top .3s ease, opacity .3s ease;
}
.products-grid .product:hover .prod-details {
  opacity: 1;
  top: 25%;
}

<div class="products-grid">
  <div class="product">
    <div class="prod-details"></div>
  </div>
  <div class="product">
    <div class="prod-details"></div>
  </div>
  <div class="product">
    <div class="prod-details"></div>
  </div>
  <div class="product">
    <div class="prod-details"></div>
  </div>
  <div class="product">
    <div class="prod-details"></div>
  </div>
  <div class="product">
    <div class="prod-details"></div>
  </div>
  <div class="product">
    <div class="prod-details"></div>
  </div>
</div>

我可以在匹配的 Children 中使用 jQuery

Can I use jQuery in a matched Children

jquery

children

hover