Question

所以我有一个带有项目网格的容器，我希望能够检测到行之间的悬停。不是单个项目。

重要的是要记住，容器和每行中的项目数量将会改变。

我的商品容器目前看起来像这样

<div class="container">
    <div class="hover-placeholder"></div>
    <div class="row">
        <!-- Start : Items -->
            <div class="col-md-3">...</div>
            <div class="col-md-3">...</div>
            <div class="col-md-3">...</div>
            <div class="col-md-3">...</div>
            ...
            <div class="col-md-3">...</div>
        <!-- End : Items -->
    </div>
</div>

最好我不要想要每隔4个项目放一个占位符元素。主要是因为在较小的屏幕上，每行的项目数量将减少。这就是为什么在我上面的例子中，我在网格外面有一个占位符，我希望transform: translateY(..)到悬停行之间的位置。

这就是我目前的情况：https://jsfiddle.net/0t8c0h4m/

它远不及我所追求的结果，但我已经到了我过度思考并陷入困境的地步。

任何帮助都会很棒！

更新

此功能的目标是当用户悬停负空间时，.hover-placeholder将转换为该位置并变为可见。点击后会在行之间添加永久分隔符。

SUCCESS！

我已经解决了我的问题！谢谢大家的帮助。

以下是我的解决方案：https://jsfiddle.net/0t8c0h4m/9/

Answer 1

如果您只是在寻找元素之间的悬停效果而没有别的东西，我认为你太复杂了。

<强>更新

var offsets;

function get_offsets() {
  offsets = {};
  $('.card').each(function() {
    var $this = $(this);
    var card_offset = $this.offset().top;
    offsets[card_offset] = {
      ele: $this
    };
  })
}
get_offsets();

function get_last_ele(mouse_location) {
  var element;
  var previous_key;
  $.each(offsets, function(key, obj) {
    if (key > mouse_location && previous_key > 0) {
      element = offsets[previous_key].ele;
      return false;
    }
    previous_key = key;
  })
  return element;
}

$('.container').mousemove(function(e) {
  if ($(e.target).parents('.row').length == 0) {
    var last_item_row = get_last_ele(e.pageY)
    console.log(last_item_row.text())
  }
});

JSFiddle：https://jsfiddle.net/0t8c0h4m/6/

我只提供在您悬停的空间之前获取行上最后一项的代码。从那里你可以按照你喜欢的方式附加行或转换占位符。

Answer 2

请尝试使用以下脚本

(function($) {
    'use strict';

  // Count items per row
  function items_per_row($collection) {
    var count = 0;

    $collection.each(function() {
      var $this = $(this);

      if ($this.prev().length > 0) {
        if ($this.position().top !== $this.prev().position().top) {
          return false;
        } else {
          count++;
        }
      } else {
        count++;
      }
    });

    var last = count ? $collection.length % count : 0,
        rows = count ? Math.round($collection.length / count) : 0;
    if (last == 0) {
      last = count;
    }

    return {
      count: count,
      last: last,
      rows: rows
    }
  };

  // On card hover, print current row
  $('.card').mouseenter(function() {
    var $card       = $(this);

    var item_count  = items_per_row( $('.card') ),
        index       = $(this).index(),
        current_row = Math.floor(index / item_count.count) + 1;

        $('pre').text( $card.find('.inner').text() + ' is in row '+ current_row );
  });
   $('.card').mouseout(function(){
  $('pre').text('');

  });


})(jQuery);

Answer 3

所以我想出了一个解决方案，用CSS显示每一行之间的分隔符。我只是一直在思考这个问题。

我在每个项目之后添加了一个分隔元素，并使用css nth-child()我可以在每个断点处显示特定的分隔符。

我还添加了我的目标分组功能。

更新示例：https://jsfiddle.net/0t8c0h4m/9/

JS在项目之间悬停负空间

3 个答案: