Web 抓取圖像的鼠標懸停標簽

Question

我有一個網站，如果我將鼠標懸停在圖像的特定部分上，則會出現一些有趣的信息。

我想將其提取為結構化格式，即：

Zürich, 2000 und mehr
Hinwil, 1400 bis 1600
Zug, 2000 und mehr
...

這是它的樣子：

要查看實時示例，只需滾動到此處的第一張圖片： https://www.republik.ch/2020/01/27/stadt-land-graben-die-hotspots

如果我在圖像的不同部分上使用 hover，我會看到不同的 label 出現。

我無法在源代碼中輕松找到此信息。 圖像至少有數百個部分，因此手動瀏覽它需要相當長的時間。

將鼠標懸停在不同部分時，抓取我看到的數據的最佳方法是什么？

Answer 1

我不確定這是否是您正在尋找的：

document.querySelector('figure[data-css-18r0zrg] svg').addEventListener("mousemove",function(){
if(document.querySelector('div[data-css-5rrfwp]') !== null)
{
    console.log(document.querySelector('div[data-css-5rrfwp]').innerText.replace(/\n/g, " "));
}

});

更新

document.querySelector('figure[data-css-18r0zrg] svg').addEventListener("mouseover",function(){
  if(document.querySelector('div[data-css-5rrfwp]') !== null)
  {
    console.log(document.querySelector('div[data-css-5rrfwp]').innerText.replace(/\n/g, " "));
  }
});

document.querySelectorAll("[data-css-11e8ajt]").forEach(el=>{
    setTimeout(function(){
        el.dispatchEvent(new MouseEvent('mouseover', { 'bubbles': true }));
    },5000);
});

粘貼上面的代碼並在網頁控制台中按 Enter 鍵