是否可以在一个svg区域中进行两种不同的悬停操作？

Question

I am learning SVG and using css hover effects to have a minimalist-looking graph in which details appear as your mouse hovers. I am running up against an apparent limitation in that once a particular piece of "real estate" in my svg element has a hover effect assigned to it, I cannot figure out a way to have another overlapping element in the same spot with a different hover effect.

This are pics of my chart:

first picture, second picture and third picture.

The first image is the minimalist chart with no hover. The second image is when a person hovers over one of the bars--as you can see, weekly kilometers appear. In the third image, when the person hovers anywhere in my transparent rectangle (which occupies the entire bottom two-thirds of the chart) the x-axis description of weeks appears.

The problem I am having is that the user in this setup can see EITHER the x-axis or the kilometer value. They can't see both. I would like to have my x-axis appear upon mouse-over at any place in the entire rectangle. Currently, it works everywhere except in the bar areas. I don't want the bar areas "excluded" from the mouseover effect!

This is my simplified code. The "goosegg" appears when there are no kilometers ridden in the week; I left that code out for simplicity.

    <?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>";
                }

And the 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;
}

So to sum it all up, I'm looking for a way to make the x-axis visible when mouseover anywhere in the entire transparent "axis" class rectangle area, not just in the rectangle areas that aren't part of the "bar" class. I am looking primarily for a svg/css only solution. If it is possible only via javascript, that also will be helpful to know and I can implement it in a few weeks when I actually get to learning javascript; I'm a newbie and want to get svg fundamentals down before I add javascript to my code.

Thank you!

Answer 1

From your explanation it seems that the elements are not related to one another. The same rules apply to SVG as to regular HTML: a hover effect will propagate up the CSS Object Model but it's difficult and not recommended to connect arbitrary parts of SVG together through HTML.

A suggestion would be to have the axis show up when you hover over any part of the chart. In this case, assuming that everything is wrapped up in .chart, the contents could be something like

<g class="chart">
    <g class="bar">
    <g class="bar">
    <g class="bar">
    <g class="bar">
    <g class="axis">
</g>

Then your effect could be something like

.chart
.chart:hover .axis { opacity: 1; }