Javascript 如何在悬停时禁用闪烁操作-CSS3

我想禁用悬停在状态上时运行的任何操作。我想在加载图表时开始闪烁，但当我悬停在状态上时，我不想再次从Begging运行闪烁

我试图在5000毫秒后删除类，但当我在5秒钟之前悬停时，闪烁再次从Begging运行，并且所有状态的闪烁都不同步

---

我只想在加载图表时只运行一次闪烁，悬停后不再运行。因此，悬停不会影响任何东西-不会关闭闪烁，也不会再次运行闪烁。谢谢

尝试使用javaScriptsetTimeout函数，如下所示：

$.getJSON('https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/us-population-density.json', function (data) {

    let i = 0;
    // Make codes uppercase to match the map data
    $.each(data, function () {
        this.code = this.code.toUpperCase();
        if(i%2 == 0)
        this['className'] = 'blinking-points';
        else 
        this['className'] = '';
        i++;

    });

    // Instantiate the map
    Highcharts.mapChart('container', {

        chart: {
            map: 'countries/us/us-all',
            borderWidth: 1
        },

        title: {
            text: 'US population density (/km²)'
        },

        exporting: {
            sourceWidth: 600,
            sourceHeight: 500
        },

        legend: {
            layout: 'horizontal',
            borderWidth: 0,
            backgroundColor: 'rgba(255,255,255,0.85)',
            floating: true,
            verticalAlign: 'top',
            y: 25
        },

        mapNavigation: {
            enabled: true
        },

        colorAxis: {
            min: 1,
            type: 'logarithmic',
            minColor: '#EEEEFF',
            maxColor: '#000022',
            stops: [
                [0, '#EFEFFF'],
                [0.67, '#4444FF'],
                [1, '#000022']
            ]
        },

        series: [{
            animation: {
                duration: 1000
            },
            data: data,
            joinBy: ['postal-code', 'code'],
            dataLabels: {
                enabled: true,
                color: '#FFFFFF',
                format: '{point.code}'
            },

            states: {
                hover: {
                    enabled: false
                }
            },

            name: 'Population density',
            tooltip: {
                pointFormat: '{point.code}: {point.value}/km²'
            }
        }]
    });

   //Add this code
window.setTimeout(function(){
     $('.blinking-points').removeClass('blinking-points');
   },5000);
});

然后，您可以使用定时器，将延迟设置为要保持状态闪烁的时间间隔。这里5000延迟等于5秒，因此在5秒后，回调函数将自动调用，并删除闪烁点类，因此状态将永远停止闪烁

---

希望有帮助

首先，您需要将init

plotOptions.series.enableMouseTracking

设置为false，以避免向点添加

悬停

状态。然后，您可以使用

setTimeout

功能在

chart.events.load

功能上设置，以切换点上的类

闪烁点

，最后，通过将其设置为

true

再次启用鼠标跟踪。以下是代码和实时示例：

chart: {
  map: 'countries/us/us-all',
  borderWidth: 1,
  events: {
    load() {
      var chart = this
      setTimeout(function() {
        var points = chart.series[0].points

        // Toggle class 'blinking-points' to avoid starting animation twice
        points.forEach(p => {
          p.update({
            className: ''
          })
        })

        // Enable mouse tracking to make tooltip available again
        chart.update({
          plotOptions: {
            series: {
              enableMouseTracking: true,
            }
          },
        })

      }, 5000)
    }
  }
},
plotOptions: {
  series: {
    enableMouseTracking: false,
  }
}

实例：

---

亲切的问候

当我将鼠标悬停在“状态”上时，我没有看到任何动画播放，但是CSS属性会帮助您悬停吗？当您将鼠标悬停在美国状态上时，动画（闪烁）从Begging开始（并且持续时间长于加载页面时开始的动画）。暂停、运行和取消设置的动画播放状态没有帮助。感谢您的意愿，但我不想在悬停时停止闪烁。我不想在悬停时有任何改变。我只想在图表加载时闪烁。我不想再次运行闪烁，也不希望悬停影响闪烁。请使用javaScript setTimeout函数尝试更新的答案我已经尝试过了（如我在问题中所述）。课程在5秒后取消，但在5秒之前悬停会改变动画，并且“美国各州”上有不同的颜色（不同步）-就像我在问题中说的。但是仍然感谢你的尝试。你真漂亮，丹尼尔！！！这正是我一直在寻找的；）太棒了

$.getJSON('https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/us-population-density.json', function (data) {

    let i = 0;
    // Make codes uppercase to match the map data
    $.each(data, function () {
        this.code = this.code.toUpperCase();
        if(i%2 == 0)
        this['className'] = 'blinking-points';
        else 
        this['className'] = '';
        i++;

    });

    // Instantiate the map
    Highcharts.mapChart('container', {

        chart: {
            map: 'countries/us/us-all',
            borderWidth: 1
        },

        title: {
            text: 'US population density (/km²)'
        },

        exporting: {
            sourceWidth: 600,
            sourceHeight: 500
        },

        legend: {
            layout: 'horizontal',
            borderWidth: 0,
            backgroundColor: 'rgba(255,255,255,0.85)',
            floating: true,
            verticalAlign: 'top',
            y: 25
        },

        mapNavigation: {
            enabled: true
        },

        colorAxis: {
            min: 1,
            type: 'logarithmic',
            minColor: '#EEEEFF',
            maxColor: '#000022',
            stops: [
                [0, '#EFEFFF'],
                [0.67, '#4444FF'],
                [1, '#000022']
            ]
        },

        series: [{
            animation: {
                duration: 1000
            },
            data: data,
            joinBy: ['postal-code', 'code'],
            dataLabels: {
                enabled: true,
                color: '#FFFFFF',
                format: '{point.code}'
            },

            states: {
                hover: {
                    enabled: false
                }
            },

            name: 'Population density',
            tooltip: {
                pointFormat: '{point.code}: {point.value}/km²'
            }
        }]
    });

   //Add this code
window.setTimeout(function(){
     $('.blinking-points').removeClass('blinking-points');
   },5000);
});

chart: {
  map: 'countries/us/us-all',
  borderWidth: 1,
  events: {
    load() {
      var chart = this
      setTimeout(function() {
        var points = chart.series[0].points

        // Toggle class 'blinking-points' to avoid starting animation twice
        points.forEach(p => {
          p.update({
            className: ''
          })
        })

        // Enable mouse tracking to make tooltip available again
        chart.update({
          plotOptions: {
            series: {
              enableMouseTracking: true,
            }
          },
        })

      }, 5000)
    }
  }
},
plotOptions: {
  series: {
    enableMouseTracking: false,
  }
}