是否可以在一个 svg 区域中有两个不同的悬停操作

我正在学习SVG并使用css悬停效果来制作一个看起来极简的图表，其中细节会在鼠标悬停时显示。我遇到了一个明显的限制，即一旦我的 svg 元素中的特定"房地产"分配了悬停效果，我就无法找到一种方法在同一位置拥有另一个重叠元素具有不同的悬停效果。

这是我的图表图片：

第一张图片，第二张图片和第三张图片。

第一个图像是没有悬停的极简主义图表。第二张图片是当一个人悬停在其中一个条形上时——如您所见，每周公里数出现。在第三张图片中，当此人将鼠标悬停在我的透明矩形（占据图表的整个底部三分之二）中的任意位置时，将显示周的 x 轴描述。

我遇到的问题是此设置中的用户可以看到 x 轴或公里值。他们看不到两者。我想让我的 x 轴在整个矩形中的任何位置悬停时出现。目前，除酒吧区域外，它适用于所有地方。我不希望条形区域"排除"在鼠标悬停效果之外！

这是我的简化代码。当一周内没有骑行公里时，会出现"鹅蛋";为了简单起见，我省略了该代码。

    <?php
            //The invisible rectangle and x-axis
            echo "<g class = '"axis'"><rect style = '"fill: pink; opacity: 0;'" width = '"590'" height = '"240'"";
            echo "x ='"0'"";
            echo "y = '"100'"></rect>";
            echo "<text y = '"357'" x = '"";
            echo "20";
            echo "'" dy = '".35em'">";
            echo "<tspan x = '"22'">Week 0</tspan><tspan x = '"92'">Week 1</tspan><tspan x = '"162'">Week 2</tspan><tspan x = '"232'">Week 3</tspan><tspan x = '"302'">Week 4</tspan><tspan x = '"372'">Week 5</tspan><tspan x = '"442'">Week 6</tspan><tspan  x = '"512'">Week 7</tspan>";
            echo "</text>";
            echo "</g>";
               //displays bars with kilometers and km value mouseover
               for ($i = 0; $i < 8; $i++) {
                ?>
                <g class="bar">
                <rect width="60" height="<?php echo round($sums_for_tabletest[$i]); ?>" x="<?php echo (20 + ($i * 70)); ?>"
                      y="<?php echo(340 - round($sums_for_tabletest[$i])); ?>"></rect>
                <?php
                echo "<text y='"";
                echo(330 - round($sums_for_tabletest[$i]));
                echo "'" x = '"";
                if (round($sums_for_tabletest[$i]) < 100) {
                    echo(40 + ($i * 70));
                } elseif (round($sums_for_tabletest[$i]) < 10) {
                    echo(38 + ($i * 70));
                } else {
                    echo(39 + ($i * 70));
                }
                 echo "'" dy='".35em'">";
                echo round($sums_for_tabletest[$i]);
                echo "</text>";
                echo "</g>";
                }

和 CSS：

.axis {
  fill: pink;
}
.axis text {
   fill:  #ab1d98;
    font-size: .9em;
    font-weight: 600;
    letter-spacing: 1px;
    opacity: 0;
}
.axis:hover text,
.axis:focus text {
   opacity: 1;
    fill:  #ab1d98;
    font-weight: 600;
    letter-spacing: 1px;
}
.bar {
    fill: #600a58;
    height: 41px;
    transition: fill .3s ease;
    cursor: pointer;
    }
.bar text {
    font-size: .9em;
    font-weight: 800;
    opacity: 0;
}
.bar:hover,
.bar:focus {
    fill: #ffff99;
}
.bar:hover text,
.bar:focus text {
    fill: black;
    opacity: 1;
}

因此，总而言之，我正在寻找一种方法，当将鼠标悬停在整个透明"轴"类矩形区域中的任意位置时，x轴可见，而不仅仅是在不属于"bar"类的矩形区域中。我主要在寻找仅 svg/css 的解决方案。如果只能通过 javascript 实现，那也会很有帮助，我可以在几周内真正开始学习 javascript 时实现它;我是一个新手，想在将javascript添加到我的代码之前了解svg基础知识。

谢谢！