公開カードで公開しているコンテンツを公開しました

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

これは実用的なソリューションよりもハックの多くのように見えるかもしれないが、それは仕事が行われます！

$(".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を参照すると、より良い考えを得ることができます。

Answer 2

私はこれを自分自身で行う方法を探していましたが、以下の結論に達しました。上にマウスを置くと、マテリアライズCSSから画像カードが開き、カードを離れると閉じます。私はこれが誰かを助け、この質問に簡潔に答えなければならないことを願っています。

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

Answer 3

または、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)); 
     } 
    } 
    } 
}