将鼠标悬停在其他onpage元素上时更改点样式

Change point style on hover over other onpage element

本文关键字：样式 元素 悬停 鼠标 其他 onpage      更新时间：2023-09-26

我有一个从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>

现在我有了一个高点气泡图。气泡（点）id等于跨度id。我的泡泡被设计成没有填充物和白色边框。

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

感谢

首先，Highcharts没有提供在标记边界上设置"短划线样式"的简单方法（它可以设置线条，但不能设置标记）。如果你真的下定决心，你需要编写一个自定义标记。

其次，如果你想在<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'}});
        }
    });
 });

下面是一个例子。

相关文章：