javascript - 将鼠标悬停在其他页面元素上时更改点样式

Question

我有一个从 PHP 中提取的捐赠者列表，然后我动态地为每个捐赠者分配一个 id，即

<div class="rankings-column first">
    <h3 class="ranking vgood">Very good</h3>
    <span id="1" class="0">
        <a href="http://ati.publishwhatyoufund.org/donor/usmcc/" title="U.S., MCC">1. U.S., MCC</a>
    </span>
    <span id="2" class="0">
        <a href="http://ati.publishwhatyoufund.org/donor/gavi/" title="GAVI">2. GAVI</a>
    </span> 
    <span id="3" class="0">
        <a href="http://ati.publishwhatyoufund.org/donor/ukdfid/" title="UK, DFID">3. UK, DFID</a>
    </span>
    <span id="4" class="0">
        <a href="http://ati.publishwhatyoufund.org/donor/undp/" title="UNDP">4. UNDP</a>
    </span>    
</div>

现在我有了一个 Highcharts 气泡图。气泡(点)id 等于 span id。我的气泡被设计为没有填充和白色边框。

当我将鼠标悬停在跨度上时，我希望气泡的边框变为虚线。我怎么做？如果不可能，我想更改颜色或线宽。

谢谢

Answer 1

首先，Highcharts 没有提供在标记边框上设置“破折号样式”的简单方法(它适用于线条，但不适用于标记)。如果您真的下定决心要这样做，则需要编写一个自定义标记。

其次，如果你想update <span> 上的标记以其他方式(如填充或边框颜色)悬停事件我会做这样的事情:

跨度如下:

<span id="0" class="aSpan">Span 0</span>
<span id="1" class="aSpan">Span 1</span>
<span id="2" class="aSpan">Span 2</span>
<span id="3" class="aSpan">Span 3</span>

像这样的 Highcharts 数据:

data: [{x: Math.random() * 100, y: Math.random() * 100, z: Math.random() * 100, id: 0},
       {x: Math.random() * 100, y: Math.random() * 100, z: Math.random() * 100, id: 1},                  
       {x: Math.random() * 100, y: Math.random() * 100, z: Math.random() * 100, id: 2},
       {x: Math.random() * 100, y: Math.random() * 100, z: Math.random() * 100, id: 3}]

然后悬停事件如下:

$('.aSpan').hover(function(){
    var myId = parseInt($(this).attr('id'));
    var series = Highcharts.charts[0].series[0];
     $.each(series.points, function(_,point){
        if (point.id === myId){
            point.update({marker: {fillColor: 'red'}});
        }
    });
 }); 

这是一个 example .