是否可以处理 am5.Container 上的指针悬停事件？

Question

向地图添加 HTML 标签并附加指针悬停事件时，不会触发。目标是更改悬停时的 HTML 内容。我尝试使用工具提示，但是悬停事件不起作用，并且工具提示显示边框，这在我的情况下是不可接受的

const root = am5.Root.new('#map');

    root.setThemes([
      am5themes_Animated.new(root), // Adding animation
    ]);

    const chart = root.container.children.push(
      am5map.MapChart.new(root, {
        projection: am5map.geoNaturalEarth1(), // Making the map more elongated
      }),
    );
    const polygonSeries = chart.series.push(
      am5map.MapPolygonSeries.new(root, {
        geoJSON: am5geodata_worldLow,
        exclude: ['AQ'],
      }),
    );

    /**
     * Common styles for all countries.
     */
    polygonSeries.mapPolygons.template.setAll({
      fill: am5.color(0x9563c7),
      stroke: am5.color(0x292131),
      strokeWidth: 1,
      fillOpacity: 1,
      templateField: 'polygonSettings'
    });

    /**
     * Coloring individual countries
     */
    polygonSeries.data.setAll(
      this.mapService.countries.map(country => ({
        id: country.id,
        polygonSettings: {
          fill: am5.color(country.fill),
        },
      })),
    );

    /**
     * Creating custom labels for partner countries
     */
    const pointSeries = chart.series.push(
      am5map.ClusteredPointSeries.new(root, {
        minDistance: 30,
        scatterRadius: 10,
        stopClusterZoom: 0.9,
      }),
    );

    pointSeries.data.setAll(
      this.mapService.countries.map(country => ({
        countryCode: country.id,
        img: country.img,
        geometry: country.geometry,
      })),
    );

    pointSeries.bullets.push(
      (_: Root, _2: Series, dataItem: DataItem<IMapPointSeriesDataItem>): Bullet => {
        const { countryCode, img } = dataItem.dataContext as IMapData;

        const container = am5.Container.new(root, {
          cursorOverStyle: 'pointer',
          interactive: true,
          html: `
                <div class="country-label">
                    <img src="${img}" alt="img">
                    ${countryCode}
                </div>
                `,
          x: am5.percent(50),
          centerX: am5.percent(50),
        });

        container.events.on('pointerover', () => { // It doesn't work
          container.set('html', '<div>text</div>');
        });

        container.events.on('pointerout', () => { // It doesn't work
          container.set('html', '<div>text</div>');
        });

        container.events.on('click', function (ev) { // It works.
          console.log(12345);
          container.set('html', '<div>text</div>');
        });

        return am5.Bullet.new(root, {
          sprite: container,
        });
      },
    );

    /**
     * Combining labels.
     */
    pointSeries.set('clusteredBullet', function (root) {
      const container = am5.Container.new(root, {
        cursorOverStyle: 'pointer',
      });

      /**
       * This is a rounded-corner background rectangle for the cluster digit
       */
      container.children.push(
        am5.RoundedRectangle.new(root, {
          width: 60,
          height: 28,
          dx: -30,
          dy: -13,
          cornerRadiusBL: 38,
          cornerRadiusBR: 38,
          cornerRadiusTL: 38,
          cornerRadiusTR: 38,
          fill: am5.color(0x111111),
          fillOpacity: 0.3,
          brightness: 0,
          crisp: true,
          stroke: am5.color(0x171b2c),
        }),
      );

      /**
       * This is a background rectangle to create a blur effect
       */
      container.children.push(
        am5.RoundedRectangle.new(root, {
          width: 64,
          height: 34,
          dx: -31,
          dy: -14,
          cornerRadiusBL: 38,
          cornerRadiusBR: 38,
          cornerRadiusTL: 38,
          cornerRadiusTR: 38,
          fill: am5.color(0x111111),
          blur: 3,
          fillOpacity: 0.55,
        }),
      );

      /**
       * The digit, according to the documentation, is implemented using a Label
       */
      container.children.push(
        am5.Label.new(root, {
          centerX: am5.p50,
          centerY: am5.p50,
          fill: am5.color(0xffffff),
          populateText: true,
          fontSize: 16,
          text: '+{value}',
        }),
      );

      /**
       * Clicking on the cluster zooms into the region.
       */
      container.events.on('click', function (e: am5.ISpritePointerEvent) {
        pointSeries.zoomToCluster(e.target.dataItem);
      });

      return am5.Bullet.new(root, {
        sprite: container,
      });
    });

我使用container.events.on附加事件。但是，指针悬停不起作用，而单击则完美。

Answer 1

为 am5.Label 添加背景

https://www.amcharts.com/docs/v5/concepts/common-elements/labels/#labels-as-interactive-elements

背景：am5.Rectangle.new(root, { 填充：am5.color(0x000000), 填充不透明度：0 })