Question

我尝试将每个Grid项的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类一起使用，而不是.toggle()。

希望这会有所帮助！

.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吗

1 个答案: