Question

我正在开发一个项目，我将工具提示附加到DOM。当鼠标悬停在对象上时，工具提示会淡入视图。当我离开时，工具提示淡出。

我遇到的问题是，它仍然在其他元素之上，因此阻止了他们的鼠标悬停事件。通常，我会删除元素：d3.select("#theElement").transition().style("opacity",0).remove()

问题是，我希望以后能够在鼠标悬停时重新附加它。有没有办法暂时解决工具提示，它不会妨碍它？也许在DOM或其他东西？大多数人如何处理D3中的这个问题？

Answer 1

您有几种选择：

将元素的CSS z-index设置为其他元素的后面：

document.getElementById('theElement').style.zIndex = -9999;

将元素的CSS样式可见性设置为隐藏：

document.getElementById('theElement').style.visibility = "hidden";

编辑：最初我建议更改其display样式，但显然未显示仍会生成事件。

或者设置一个隐藏元素的CSS类：

document.getElementById('theElement').className += ' hide';

样式表的位置：

.hide: { display: none; visibility: hidden }

或者您正在使用具有此类的现有CSS框架（例如Bootstrap）。

应该能够与d3完成类似的事情：

d3.select('#theElement').style('z-index', -9999); d3.select('#theElement').style('visibility', 'hidden'); d3.select('#theElement').classed('hide', true);

Answer 2

如果问题是你在工具提示下阻止鼠标悬停在其他方面是不可见的，你可以在需要隐藏元素时（而不是移动元素）将pointer-events属性设置为none：

 selection.style("pointer-events","none")

鼠标事件现在将通过此元素进行查看，并且工具提示不会阻止其他＆＃34;鼠标悬停事件触发＆＃34;

如果工具提示根本没有鼠标交互，你可以将工具提示附加指针事件设置为无启动（或使用css来获得相同的结果）。

但是，如果工具提示具有鼠标交互功能，则可以在工具提示再次需要鼠标交互时重新设置指针事件属性：

selection.style("pointer-events","all")

D3中的.remove（）的临时替代

2 个答案: