1つのsvg領域に2つの異なるホバーアクションを設定できますか？

Question

私はSVGを学び、css hoverエフェクトを使ってマウスが動くにつれて詳細が現れるミニマリストのようなグラフを作成しています。私は、svg要素内の特定の「不動産」の部分にホバー効果が割り当てられていれば、別のホバーを使って同じ場所に別のオーバーラップ要素を持つ方法を見つけることができないという明らかな制限に逆行しています効果。

first picture、second pictureとthird picture：

これは私のチャートの写真です。

最初の画像は、ホバーなしのミニマリストチャートです。 2番目の画像は、人がバーの1つを乗り越えるときです。あなたが見ることができるように、毎週のキロメートルが現れます。 3番目の画像では、透明な長方形（チャートの3分の2全体を占める）のどこかに人が乗ると、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軸を見えるようにする方法を探しています「バー」クラスの一部ではない矩形領域内だけではなく、矩形領域にも適用されます。私は主にsvg/cssのみのソリューションを探しています。 JavaScriptを介してのみ可能な場合は、それも知っていると私は実際にはJavaScriptを学ぶには、数週間で実装することができます役立つだろう、私は初心者で、私のコードにjavascriptを追加する前にsvgの基礎を取りたいと思っています。

ありがとうございました！

Answer 1

あなたの説明から、要素は互いに関連していないようです。通常のHTMLと同じ規則がSVGに適用されます。ホバー効果は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; }