实现光标轨迹效果同时确保下层按钮可交互的方案求助

问题出在固定定位的.grid层覆盖在按钮上方，默认会拦截所有鼠标事件，导致下层按钮无法被点击。要保留光标轨迹效果同时让按钮正常交互，只需要修改CSS的pointer-events属性即可：

修改后的CSS代码 #

main {
  position: relative;
  width: 100vw;
}

.grid {
  z-index: 99;
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
  pointer-events: none; /* 添加这行，让网格层不拦截鼠标事件 */
}

.grid__item {
  height: 60px;
  width: 60px;
  opacity: 0;
  transition: opacity 2s ease 0.4s;
  background-color: black;
  border-radius: 0.1rem;
  pointer-events: auto; /* 恢复网格项的鼠标事件，保证hover生效 */
}

.grid__item:hover {
  opacity: 1;
  transition: opacity 0.1s;
}

完整代码示例 #

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="grid">
  <div class="grid__item"></div>
</div>

<main>
  <button>Hokay!</button>
</main>

JavaScript #

$(document).ready(function() {
  var $grid = $('.grid')
  var $gridItem = $('.grid__item')
  var gridItemHeight = $gridItem.height()
  var gridItemWidth = $gridItem.width()

  var horzCount = Math.floor($grid.width() / gridItemWidth)
  var vertCount = Math.floor($grid.height() / gridItemHeight)

  var totalGridItems = horzCount * vertCount
  for (var i = 0; i < totalGridItems; i++) {
    var $gridItemClone = $gridItem.clone();
    $grid.append($gridItemClone);
  }
})

原理说明 #

• pointer-events: none 会让.grid元素完全忽略所有鼠标交互，鼠标事件会直接穿透到下层的按钮上。
• 给.grid__item设置pointer-events: auto，是为了让网格项能够正常响应hover事件，保证光标轨迹效果不受影响。

内容的提问来源于stack exchange，提问作者Danian Marengo