Question

我正在学习SVG并使用css悬停效果来制作一个极简主义图形，其中细节会在鼠标悬停时出现。我遇到了一个明显的限制，那就是一个特定的＆＃34;房地产＆＃34;在我的svg元素中有一个悬停效果分配给它，我无法找到一种方法，在同一个地方有另一个重叠元素，具有不同的悬停效果。

这是我的图表的照片：

first picture，second picture和third picture。

第一张图片是没有悬停的极简主义图表。第二张图片是当一个人在其中一个酒吧上盘旋时 - 如你所见，每周公里出现。在第三张图片中，当人在我的透明矩形中占据任何位置（占据图表整个底部的三分之二）时，会显示周的x轴描述。

我遇到的问题是此设置中的用户可以看到x轴或公里值。他们无法同时看到这两者。我希望在整个矩形的任何位置鼠标悬停我的x轴。目前，除酒吧区外，它无处不在。我不想要酒吧区域＆＃34;排除＆＃34;从鼠标悬停效果！

这是我的简化代码。＆＃34; goosegg＆＃34;在本周没有公里的情况下出现;为简单起见，我把代码留了下来。

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

总而言之，我正在寻找一种方法，让鼠标悬停在整个透明＆＃34;轴上的任何地方都能看到x轴。类矩形区域，而不仅仅是在＆＃34; bar＆＃34;的一部分的矩形区域中。类。我主要寻找一个svg / css唯一的解决方案。如果只有通过javascript才有可能，这也有助于了解我可以在几周内实现它，当我真正学习javascript时;我是一个新手，想要在我的代码中添加javascript之前先关闭svg基础知识。

谢谢！

Answer 1

从您的解释来看，这些元素似乎彼此无关。相同的规则适用于SVG和常规HTML：悬停效果将传播到CSS对象模型，但它很难，不建议通过HTML将SVG的任意部分连接在一起。

建议将鼠标悬停在图表的任何部分上时显示轴。在这种情况下，假设所有内容都包含在.chart中，内容可能类似于

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

那么你的效果可能就像

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

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

1 个答案: