How can I show and hide sibling element when I mouse over in SVG?

Question

I used SVG file which is circle shape with two divisions and I want to show and hide the text when I mouse over selected area. I did showing text when I mouse over but it is still not working when I hide it. I had tried to use only CSS but it did not work.

What I want is to show #g0(text) first and then show #text-r-1(text) and #text-r-2(text) when I mouse over each #g1(area) and #g2(area), and make #g0(text) hide. And when I mouse out each #g1(area) and #g2(area), show #g0(text) again.

I am sorry for explaining well but I really need your help! :o

---

    <svg id="circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1142.28 1142.28">
        <g id="g0">
        <text id="text-0" x="50%" y="50%" text-anchor="middle" dy=".3em" font-size="50px" > I want to hide this </text>   
        </g>

        <g id="g1">
        <text id="text-r-1" x="50%" y="50%" text-anchor="middle" stroke="#51c5cf" stroke-width="0px" dy=".3em" font-size="50px"> AAA </text>
        <path id="r-1" d="M747.32,313.17,778.87,361A366.07,366.07,0,0,1,988,295.77V238.46a423.07,423.07,0,0,0-240.68,74.71Z" transform="translate(-416.92 -92.49)" fill="none" stroke="#000" stroke-miterlimit="10"/>
        </g>

        <g id="g2">
        <text id="text-r-2" x="50%" y="50%" text-anchor="middle" stroke="#51c5cf" stroke-width="0px" dy=".3em" font-size="50px"> BBB  </text>
        <path id="r-2" d="M988.06,295.77c203.16,0,367.86,164.7,367.86,367.86s-164.7,367.85-367.86,367.85S620.2,866.79,620.2,663.63C620.2,538.18,683,427.4,778.87,361l-31.55-47.84c-111.39,76.66-184.42,205-184.42,350.46,0,234.81,190.35,425.16,425.16,425.16s425.16-190.35,425.16-425.16S1222.87,238.46,988.06,238.46H988v57.31Z" transform="translate(-416.92 -92.49)" fill="none" stroke="#000" stroke-miterlimit="10"/>
        </g> 

----------------

svg{
  width:550px;
}

path{
  stroke-width:0.5px;
}

svg text{
  font-size:30px; 
}

path#r-1{
  fill: #FF313F;
  transition: all 0.5s;
}
path#r-2{
  fill: #EBA7A7;
  transition: all 0.5s;
}

svg #text-r-1 {display: none;}
svg #g1:hover #text-r-1 {display: block;}
svg #g1:hover path#r-1 {fill:#383838;}

svg #text-r-2 {display: none;}
svg #g2:hover #text-r-2 {display: block;}
svg #g2:hover path#r-2 {fill:#383838;}

.hhh {visibility:hidden;}

---

$(document).ready(function() {
    $("#g1").hover(function() {
        $(this).siblings("#g0").addClass("hhh");
    }, function() {
        $(this).siblings("#g0").removeClass("hhh");
    });
});
    $(document).ready(function() {
        $("#g2").hover(function() {
            $(this).siblings("#g0").addClass("hhh");
        }, function() {
            $(this).siblings("#g0").removeClass("hhh");
        });
});

Answer 1

$( "#g1").hover(function() {
  $(this).prevAll().slice(0, 1).addClass('hhh');
}, function() {
        $(this).prevAll().slice(0, 1).removeClass("hhh");
    });
    
$("#g2").hover(function() {
  $(this).prev().prevAll().slice(0, 2).addClass('hhh');
}, function() {
        $(this).prevAll().slice(0, 2).removeClass("hhh");
    });

svg {
  width: 550px;
}

path {
  stroke-width: 0.5px;
}

svg text {
  font-size: 30px;
}

path#r-1 {
  fill: #FF313F;
  transition: all 0.5s;
}

path#r-2 {
  fill: #EBA7A7;
  transition: all 0.5s;
}

svg #text-r-1 {
  display: none;
}

svg #g1:hover #text-r-1 {
  display: block;
}

svg #g1:hover path#r-1 {
  fill: #383838;
}

svg #text-r-2 {
  display: none;
}

svg #g2:hover #text-r-2 {
  display: block;
}

svg #g2:hover path#r-2 {
  fill: #383838;
}

.hhh {
  visibility: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg id="circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1142.28 1142.28">
            <g id="g0">
            <text id="text-0" x="50%" y="50%" text-anchor="middle" dy=".3em" font-size="50px" > I want to hide this </text>   
            </g>

            <g id="g1">
            <text id="text-r-1" x="50%" y="50%" text-anchor="middle" stroke="#51c5cf" stroke-width="0px" dy=".3em" font-size="50px"> AAA </text>
            <path id="r-1" d="M747.32,313.17,778.87,361A366.07,366.07,0,0,1,988,295.77V238.46a423.07,423.07,0,0,0-240.68,74.71Z" transform="translate(-416.92 -92.49)" fill="none" stroke="#000" stroke-miterlimit="10"/>
            </g>

            <g id="g2">
            <text id="text-r-2" x="50%" y="50%" text-anchor="middle" stroke="#51c5cf" stroke-width="0px" dy=".3em" font-size="50px"> BBB  </text>
            <path id="r-2" d="M988.06,295.77c203.16,0,367.86,164.7,367.86,367.86s-164.7,367.85-367.86,367.85S620.2,866.79,620.2,663.63C620.2,538.18,683,427.4,778.87,361l-31.55-47.84c-111.39,76.66-184.42,205-184.42,350.46,0,234.81,190.35,425.16,425.16,425.16s425.16-190.35,425.16-425.16S1222.87,238.46,988.06,238.46H988v57.31Z" transform="translate(-416.92 -92.49)" fill="none" stroke="#000" stroke-miterlimit="10"/>
            </g>
</svg>

Answer 2

You can do it with CSS only: you set the fill-opacity to 0 for all the text. When you mouse over the group you change the fill opacity for the text inside to 1.

You can add a transition for a fancier effect.

text{fill-opacity:0}
g{pointer-events:all;}
g:hover text{fill-opacity:1}

<svg id="circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1142.28 1142.28">
        <g id="g0">
        <text id="text-0" x="50%" y="50%" text-anchor="middle" dy=".3em" font-size="50px" > I want to hide this </text>   
        </g>

        <g id="g1">
        <text id="text-r-1" x="50%" y="50%" text-anchor="middle" stroke="#51c5cf" stroke-width="0px" dy=".3em" font-size="50px"> AAA </text>
        <path id="r-1" d="M747.32,313.17,778.87,361A366.07,366.07,0,0,1,988,295.77V238.46a423.07,423.07,0,0,0-240.68,74.71Z" transform="translate(-416.92 -92.49)" fill="none" stroke="#000" stroke-miterlimit="10"/>
        </g>

        <g id="g2">
        <text id="text-r-2" x="50%" y="50%" text-anchor="middle" stroke="#51c5cf" stroke-width="0px" dy=".3em" font-size="50px"> BBB  </text>
        <path id="r-2" d="M988.06,295.77c203.16,0,367.86,164.7,367.86,367.86s-164.7,367.85-367.86,367.85S620.2,866.79,620.2,663.63C620.2,538.18,683,427.4,778.87,361l-31.55-47.84c-111.39,76.66-184.42,205-184.42,350.46,0,234.81,190.35,425.16,425.16,425.16s425.16-190.35,425.16-425.16S1222.87,238.46,988.06,238.46H988v57.31Z" transform="translate(-416.92 -92.49)" fill="none" stroke="#000" stroke-miterlimit="10"/>
        </g> 
</svg>

UPDATE

the OP is commenting:

how can I show "g0" when I mouse out g1 and g2?

A possible solution would be to move the g0 to the end of the svg element and use the ~ selector (the Subsequent-sibling Combinator): g:hover ~ #g0 text{fill-opacity:1}

text{fill-opacity:0}
g{pointer-events:all;}
g:hover text{fill-opacity:1}

g:hover ~ #g0 text{fill-opacity:1}

<svg id="circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1142.28 1142.28">


        <g id="g1">
        <text id="text-r-1" x="50%" y="50%" text-anchor="middle" stroke="#51c5cf" stroke-width="0px" dy="1.3em" font-size="50px"> AAA </text>
        <path id="r-1" d="M747.32,313.17,778.87,361A366.07,366.07,0,0,1,988,295.77V238.46a423.07,423.07,0,0,0-240.68,74.71Z" transform="translate(-416.92 -92.49)" fill="none" stroke="#000" stroke-miterlimit="10"/>
        </g>

        <g id="g2">
        <text id="text-r-2" x="50%" y="50%" text-anchor="middle" stroke="#51c5cf" stroke-width="0px" dy="1.3em" font-size="50px"> BBB  </text>
        <path id="r-2" d="M988.06,295.77c203.16,0,367.86,164.7,367.86,367.86s-164.7,367.85-367.86,367.85S620.2,866.79,620.2,663.63C620.2,538.18,683,427.4,778.87,361l-31.55-47.84c-111.39,76.66-184.42,205-184.42,350.46,0,234.81,190.35,425.16,425.16,425.16s425.16-190.35,425.16-425.16S1222.87,238.46,988.06,238.46H988v57.31Z" transform="translate(-416.92 -92.49)" fill="none" stroke="#000" stroke-miterlimit="10"/>
        </g> 
  
  
        <g id="g0">
        <text id="text-0" x="50%" y="50%" text-anchor="middle" dy=".3em" font-size="50px" > I want to hide this </text>   
        </g>
</svg>

Answer 3

First of all, you use jQuery syntax without binding it in your project - so it can't work.

Second, your JavaScript doesn't require two $( document ).ready(), just use it once.

Third, you can select #g1 and #g2 together in one selector.

Here is a quick way how it can work:

$(function() {
  $("#g1, #g2").hover(function() {
    $("#g0").addClass("hhh");
  }, function() {
    $("#g0").removeClass("hhh");
  });
});

svg {
  width: 550px;
}

path {
  stroke-width: 0.5px;
}

svg text {
  font-size: 30px;
}

path#r-1 {
  fill: #FF313F;
  transition: all 0.5s;
}

path#r-2 {
  fill: #EBA7A7;
  transition: all 0.5s;
}

svg #text-r-1 {
  display: none;
}

svg #g1:hover #text-r-1 {
  display: block;
}

svg #g1:hover path#r-1 {
  fill: #383838;
}

svg #text-r-2 {
  display: none;
}

svg #g2:hover #text-r-2 {
  display: block;
}

svg #g2:hover path#r-2 {
  fill: #383838;
}

.hhh {
  visibility: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg id="circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1142.28 1142.28">
            <g id="g0">
            <text id="text-0" x="50%" y="50%" text-anchor="middle" dy=".3em" font-size="50px" > I want to hide this </text>   
            </g>

            <g id="g1">
            <text id="text-r-1" x="50%" y="50%" text-anchor="middle" stroke="#51c5cf" stroke-width="0px" dy=".3em" font-size="50px"> AAA </text>
            <path id="r-1" d="M747.32,313.17,778.87,361A366.07,366.07,0,0,1,988,295.77V238.46a423.07,423.07,0,0,0-240.68,74.71Z" transform="translate(-416.92 -92.49)" fill="none" stroke="#000" stroke-miterlimit="10"/>
            </g>

            <g id="g2">
            <text id="text-r-2" x="50%" y="50%" text-anchor="middle" stroke="#51c5cf" stroke-width="0px" dy=".3em" font-size="50px"> BBB  </text>
            <path id="r-2" d="M988.06,295.77c203.16,0,367.86,164.7,367.86,367.86s-164.7,367.85-367.86,367.85S620.2,866.79,620.2,663.63C620.2,538.18,683,427.4,778.87,361l-31.55-47.84c-111.39,76.66-184.42,205-184.42,350.46,0,234.81,190.35,425.16,425.16,425.16s425.16-190.35,425.16-425.16S1222.87,238.46,988.06,238.46H988v57.31Z" transform="translate(-416.92 -92.49)" fill="none" stroke="#000" stroke-miterlimit="10"/>
            </g>
</svg>