jquery - 通过将激活器悬停在实现中来打开卡片显示内容

我试图通过鼠标移动激活器内容来打开显示内容的卡片，有几种不同的方法，但都不起作用。下面是我的代码片段的一个工作示例。

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">


    <div class="card">
      <div class="card-image waves-effect waves-block waves-light">
        <img class="activator" src="https://s19.postimg.org/rs95dw3b7/beautiful-flower-pictures-and-wallpapers-2.jpg">
      </div>

      <!-- card text content -->
      <div class="card-content">
        <span class="card-title activator">
      <p>Name of the listing</p>
    </span>
        <p>$10.00</p>
        <div class="card-content">
          <a href="#" class="waves-effect waves-light btn right bottom">view item</a>
        </div>
      </div>

      <!--   card reveal content -->
      <div class="card-reveal">
        <span class="card-title">
      <i class="fa fa-times right"></i>
      <div>Name</div>
    </span>
        <p>this is the data in the card reveal content</p>
        <div>
          <a href="#" class="waves-effect waves-light btn right bottom">view</a>
        </div>
      </div>
    </div>

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>

最佳答案

我自己也在想办法，但后来得出了以下结论。当你将鼠标悬停在物化css上时，它将打开一张图像卡，当你离开该卡时，它将关闭。我希望这对某人有帮助，它应该简明地回答这个问题。

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