Angular中ngx-toastr实现Skype式悬停穿透点击功能问询

这个需求我之前做类似功能的时候刚好研究过，完全可以通过自定义CSS配合ngx-toastr的默认行为来实现，不需要额外修改组件逻辑，步骤很简单：

核心思路 #

当用户悬停在toast上时，通过CSS修改两个关键属性：

1. pointer-events: none：让鼠标事件直接穿透toast，落到下方的按钮上
2. opacity：降低toast的透明度，给用户视觉上的提示“现在可以点击下面的元素了”
   同时如果需要保留toast的关闭按钮功能，单独给关闭按钮恢复pointer-events: auto即可。

具体实现步骤 #

1. 编写自定义CSS样式 #

因为ngx-toastr的弹窗元素是挂载在body标签下的，如果你是在Angular组件中写样式，需要用::ng-deep来穿透样式隔离（或者直接把样式写在全局的styles.css/styles.scss里）：

/* 全局样式文件或使用::ng-deep的组件样式 */
::ng-deep .toast-container.toast-top-right .toast {
  /* 默认状态保持正常交互 */
  pointer-events: auto;
  /* 添加过渡动画，让透明度变化更平滑 */
  transition: opacity 0.2s ease-in-out;
}

/* 悬停时修改透明度并允许事件穿透 */
::ng-deep .toast-container.toast-top-right .toast:hover {
  opacity: 0.3; /* 可根据需求调整透明度，0.3是比较适中的数值 */
  pointer-events: none;
}

/* 单独保留关闭按钮的可点击性（可选） */
::ng-deep .toast-container.toast-top-right .toast:hover .toast-close-button {
  pointer-events: auto;
  opacity: 1; /* 确保关闭按钮在toast透明时依然清晰 */
}

2. 验证效果 #

写完样式后，触发toast提示，悬停上去就能看到：

• toast会平滑变透明
• 鼠标点击toast覆盖的按钮时，事件会直接传递到按钮上
• 如果保留了关闭按钮，依然可以点击关闭toast

额外注意事项 #

• 如果你的ngx-toastr版本不同，类名可能略有差异，可以通过浏览器开发者工具查看toast元素的类名来调整CSS选择器
• 透明度数值可以根据你的UI设计需求修改，比如0.2或0.4都可以
• 如果你不需要保留关闭按钮的交互，可以删掉最后一段关于.toast-close-button的CSS代码

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