Javascript 使用CSS和JS更改调试悬停状态的最佳方法

我想知道在使用JS库（在我的示例中是Highcharts）时，调试处于悬停状态的HTML元素的最佳/essayist方法是什么。 这个库使用CSS，但也使用JS实时操作DOM

例如，在附加的JS小提琴中有一个Highcharts散点图，我想知道工具提示（当您悬停其中一个点时显示）的所有属性。 我在这里的类似问题中看到，在firebug中，我可以模拟元素悬停状态的CSS规则，但我没有看到任何关于如何在CSS和JS一起使用时进行调试的答案

是否有任何选项可以将页面“堆叠”到悬停状态，以便检查整个状态

$（函数（）{
$（“#容器”）。高图({
图表：{
类型：'气泡'，
打印边框宽度：1，
zoomType:'xy'
},
图例：{
已启用：false
},
标题：{
文字：“每个国家的糖和脂肪摄入量”
},
副标题:{
文本：'来源：和'
},
xAxis：{
网格线宽度：1，
标题：{
正文：“每日脂肪摄入量”
},
标签：{
格式：“{value}gr”
},
绘图线：[{
颜色：'黑色'，
dashStyle:'点'，
宽度：2，
价值：65，
标签：{
轮换：0，
y:15，
风格：{
字体：“斜体”
},
文字：“安全脂肪摄入量65g/天”
},
zIndex:3
}]
},
亚克斯：{
startOnTick：错，
恩东蒂克：错，
标题：{
文字：“每日糖摄入量”
},
标签：{
格式：“{value}gr”
},
最大填充：0.2，
绘图线：[{
颜色：'黑色'，
dashStyle:'点'，
宽度：2，
价值：50，
标签：{
对齐：“右”，
风格：{
字体：“斜体”
},
文字：“安全糖摄入量50g/天”，
x:-10
},
zIndex:3
}]
},
工具提示：{
是的，
总部：''，
pointFormat:“{point.country}”+
'脂肪摄入量：{point.x}g'+
'糖摄入量：{point.y}g'+
‘肥胖（成人）{point.z}%’，
页脚格式：“”，
followPointer:true
},
打印选项：{
系列：{
数据标签：{
启用：对，
格式：“{point.name}”
}
}
},
系列：[{
数据：[
{x:95，y:95，z:13.8，名字：'BE'，国家：'比利时'}，
{x:86.5，y:102.9，z:14.7，名称：'DE'，国家：'Germany'}，
{x:80.8，y:91.5，z:15.8，名字：'FI'，国家：'Finland'}，
{x:80.4，y:102.5，z:12，名称：'NL'，国家：'荷兰'}，
{x:80.3，y:86.1，z:11.8，名称：'SE'，国家：'Sweden'}，
{x:78.4，y:70.1，z:16.6，名称：“ES”，国家：“西班牙”}，
{x:74.2，y:68.5，z:14.5，名字：'FR'，国家：'France'}，
{x:73.5，y:83.1，z:10，名称：'NO'，国家：'Norway'}，
{x:71，y:93.2，z:24.7，名称：“英国”，国家：“联合王国”}，
{x:69.2，y:57.6，z:10.4，名字：'IT'，国家：'Italy'}，
{x:68.6，y:20，z:16，名字：'RU'，国家：'RUS'}，
{x:65.5，y:126.4，z:35.3，名称：“美国”，国家：“美国”}，
{x:65.4，y:50.8，z:28.5，名字：“胡”，国家：“匈牙利”}，
{x:63.4，y:51.8，z:15.4，名称：'PT'，国家：'葡萄牙'}，
{x:64，y:82.9，z:31.3，名称：“新西兰”，国家：“新西兰”}
]
}]
});
});
.highcharts工具提示h3{
保证金：0.3em0；
}
你可以用Chrome打开你的网站，点击F12，这是Web开发者工具栏，然后将鼠标悬停在你想要测试的元素上


然后从右上角选择图钉旁边的加号，选择图钉

完成后，您可以选择所需的状态


此时，您将编写一个css:hover来查看状态的发生。（但要经常复制和保存）。
将此添加到我的答案中，在控制台中运行JS以查看发生了什么。我知道此选项，但当我选中“：hover”文本旁边的复选框时，CSS规则中的HTML页面似乎没有任何变化。我将使用此示例使您的节点保持打开状态，以便您可以进行CSS编辑，您也没有确切地指定要进行的CSS更改。