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

Question

我尝试通过几种不同的方式将鼠标悬停在激活器内容上来打开卡片展示内容，但都没有奏效。下面是我的代码片段中的一个工作示例。

<!-- 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>

Answer 1

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

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