Öffnen Sie den Inhalt der Karte, indem Sie den Aktivator in materializecss schweben

Question

Ich habe versucht, den Inhalt der Karte zu öffnen, indem ich mit der Maus über den Inhalt des Aktivators ging, aber keiner von ihnen funktionierte. Hier ist ein funktionierendes Beispiel für meinen Code im folgenden Ausschnitt.

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

Dies mag als eine funktionierende Lösung eher einen Hack sein, aber es wird die Arbeit getan! Möglicherweise müssen Sie die folgenden auf Ihre JS hinzuzufügen:

$(".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'}); 
      } 
     }); 
}); 

Sie dieses codepen beziehen kann eine bessere Vorstellung zu bekommen.

Answer 2

Ich war auf der Suche nach einer Möglichkeit, dies selbst zu tun, aber dann kam zu dem Schluss, unten. Dies öffnet eine Bildkarte von Materialise CSS, wenn Sie den Mauszeiger darüber bewegen und schließt sich, wenn Sie die Karte verlassen. Ich hoffe, das hilft jemandem und es sollte diese Frage kurz beantworten.

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

Answer 3

Oder Sie können CSS oder SASS verwenden.

Hier ist ein Ausschnitt 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)); 
     } 
    } 
    } 
}