открыть карту-показать содержимое, наведя активатор в materializecss

Я пытался открыть содержимое карты, наведя указатель мыши на содержимое активатора, несколькими способами, но ни один из них не сработал. Вот рабочий пример моего кода во фрагменте ниже.

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


html jquery css materialize
person Kuladeep sony    schedule 29.03.2016    source источник
comment
Вы можете сделать что-то вроде этого codeply.com/go/SKBlBBLMQW, но activator должен быть небольшим элементом не весь образ иначе он будет постоянно заново открывать card-reveal   -  person Zim    schedule 29.03.2016
comment
спасибо, мастерски, это здорово, что на самом деле нужно, так это при наведении курсора на содержимое card-reveal, которое снова открывается при удалении мыши, card-reveal снова должно закрыться (мышь отсутствует)   -  person Kuladeep sony    schedule 30.03.2016
comment
есть ли угловой способ сделать это ??   -  person GMan    schedule 03.04.2017

Ответы (3)


arrow_upward
9
arrow_downward

Я искал способ сделать это сам, но потом пришел к следующему выводу. Это открывает карточку изображения из Materialize CSS, когда вы наводите на нее курсор, а затем закрывается, когда вы покидаете карточку. Я надеюсь, что это поможет кому-то, и он должен кратко ответить на этот вопрос.

$(function() {
    $('.card').hover(
        function() {
            $(this).find('> .card-image > img.activator').click();
        }, function() {
            $(this).find('> .card-reveal > .card-title').click();
        }
    );
});
person Alex Rindone    schedule 08.12.2016
comment
это должен быть ответ - лаконичный и выполняет свою работу - person GMan; 23.03.2017
comment
есть ли угловой способ сделать это? - person GMan; 03.04.2017
comment
Это было буквально то, что мне было нужно! Потрясающий! Благодарю вас! - person s.bridges; 10.05.2019

arrow_upward
4
arrow_downward

Или вы можете использовать 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));
      }
    }
  }
}
person Jan    schedule 01.02.2017

arrow_upward
2
arrow_downward

Это может показаться скорее хаком, чем рабочим решением, но оно выполняет свою работу! Вам может понадобиться добавить следующее в ваш 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, чтобы получить лучшее представление.

person pratikms    schedule 07.04.2016
comment
привет pratik здесь с вашим кодом секция раскрытия карты просто исчезает, а не скользит вниз, как когда мы нажимаем кнопку закрытия. Можно ли скользить вниз по разделу раскрытия карты, когда он впервые скользит вверх при наведении курсора на раздел раскрытия карты. заранее спасибо - person Kuladeep sony; 09.04.2016
comment
Да @Kuladeepsony. Спасибо, что указали на это. И извините, так как я должен был разобраться с этим в первую очередь сам. Я изменил jQuery, а также обновил ссылку codepen с соответствующим ответом. Вы можете проверить это и сообщить нам всем, если это то, что вы хотели - person pratikms; 11.04.2016