Question

我尝试通过鼠标悬停激活器内容以几种不同的方式打开卡片显示内容，但它们都没有工作。以下是我在下面的代码段中的代码示例。

＆＃13;

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

＆＃13;

Answer 1

我一直在寻找一种方法来做到这一点，但后来得出了结论。当您将鼠标悬停在它上面时，这将从Materialise CSS打开一张图像卡，然后在您离开该卡时关闭。我希望这有助于某人，它应该简明扼要地回答这个问题。

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

Answer 2

或者您可以使用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));
      }
    }
  }
}

Answer 3

这似乎更像是一个黑客而不是一个有效的解决方案，但它完成了工作！您可能需要将以下内容添加到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'});
            }
        });
});

您可以参考此codepen以获得更好的主意。

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

3 个答案: