Jquery 将激活器悬停在eCSS中，打开卡片显示内容

我试着用鼠标在activator内容上打开卡片显示内容，有几种不同的方法，但都不起作用。下面是我的代码片段中的一个工作示例

名单名称

$10.00

名称
这是卡片内容中的数据

这似乎更像是一种黑客行为，而不是一种可行的解决方案，但它完成了工作！您可能需要在JS中添加以下内容：

$(".card").mouseenter(function(e){
    if ($(this).find('> .card-reveal').length) {
        if ($(e.target).is($('.card .activator')) || $(e.target).is($('.card .activator i')) ) {
            // Make Reveal animate up
            $(this).find('.card-reveal').css({ display: 'block'}).velocity("stop", false).velocity(
                {translateY: '-100%'}, 
                {
                    duration: 300, 
                    queue: false, 
                    easing: 'easeInOutQuad'
                });
        }
    }

    $('.card-reveal').closest('.card').css('overflow', 'hidden');

});

$(".card").mouseleave(function(){
    // Make Reveal animate down and display none
    $(this).find('.card-reveal').velocity(
        {translateY: 0}, 
        {
            duration: 225,
            queue: false,
            easing: 'easeInOutQuad',
            complete: function() {
                $(this).css({ display: 'none'});
            }
        });
});

---

你可以参考这篇文章来获得更好的想法。

我自己也在寻找一种方法来做这件事，但后来得出了以下结论。这将在您将鼠标悬停在Materialize CSS上时打开一张图像卡，然后在您离开该卡时关闭。我希望这对某人有所帮助，并且它应该简明扼要地回答这个问题

$(function() {
    $('.card').hover(
        function() {
            $(this).find('> .card-image > img.activator').click();
        }, function() {
            $(this).find('> .card-reveal > .card-title').click();
        }
    );
});

---

或者您可以使用CSS或SASS

下面是一个SASS片段：

.card {
  overflow-y: hidden;

  .card-image {
    & ~ .card-reveal {
      display: block;
      transform: translateY(0%);
      pointer-events: none;
      transition: transform 0.3s;
    }

    &:active,
    &:hover {
      & ~ .card-reveal {
        display: block;
        transform: translateY(calc(-100% - 1px));
      }
    }
  }
}

---

您可以这样做，但是

激活器应该是一个小元素，而不是整个图像，否则它会不断地重新打开
卡片展示
谢谢，这很好，实际需要的是悬停，再次显示卡片展示内容在移除鼠标时，卡片展示应该再次关闭（鼠标出）有没有一个角度的方法可以做到这一点？嗨，普拉蒂克，这里有你的代码，卡片显示部分只是消失了，而不是像我们单击关闭按钮时那样向下滑动。第一次在卡片展示区上方滑过鼠标时，是否可以向下滑动卡片展示区。提前感谢是的@Kuladeepsony。谢谢你指出这一点。还有道歉，我本来应该自己处理的。我已经修改了jQuery，并用适当的答案更新了codepen链接。你可以检查一下，让我们都知道这是否是你想要的答案-简洁，工作有没有角度的方法来做到这一点？这正是我真正需要的！令人惊叹的！非常感谢。