有没有办法在不创建大量跨度的情况下确定鼠标悬停在哪个角色上？

在不创建大量跨度的情况下确定鼠标悬停在哪个元素上，可以通过使用事件委托（Event Delegation）的方式来实现。事件委托是一种将事件处理程序绑定到一个父元素上，而不是将事件处理程序绑定到每个子元素上的技术。

通过事件委托，我们可以利用事件冒泡的机制，在父元素上监听鼠标移入和移出事件，然后根据事件的目标元素（target）来确定鼠标悬停在哪个子元素上。

具体实现步骤如下：

1. 获取父元素，可以是一个容器元素或者文档的根元素。
2. 给父元素绑定鼠标移入和移出事件的监听器。
3. 在事件监听器中，通过事件对象的target属性获取触发事件的元素。
4. 根据目标元素进行相应的处理，例如添加样式、显示提示信息等。

这种方式的优势是可以减少事件处理程序的数量，提高性能和代码的可维护性。适用场景包括但不限于以下情况：

• 当需要对多个子元素进行相同的操作时，可以通过事件委托来统一管理。
• 当动态添加或删除子元素时，无需重新绑定事件处理程序。

腾讯云相关产品中，可以使用腾讯云的云函数（Serverless Cloud Function）来实现事件委托。云函数是一种无需管理服务器即可运行代码的计算服务，可以通过事件触发器来响应鼠标移入和移出事件，并在云函数中处理相应的逻辑。

腾讯云云函数产品介绍链接地址：https://cloud.tencent.com/product/scf