html - Hover one element of linked elements

Question

I have a circle and a text string grouped together in a page. I am trying to implement 3 possible situations:

. situation 1: when no elements are hover, only the circle should appear,

. situation 2: when the circle is hover, both the circle and the linked text should appear,

. situation 3: when the text is hover, only the circle should appear.

I can only implement the first 2 situations.

My attempt below:

.shape_text:hover .text {
  opacity: 1;
}

.text {
  opacity: 0;
}

.text:hover {
  opacity: 0;
}

<svg width="250" height="250">
  <g class="shape_text">
      <circle cx="30" cy="45" r="25" />
      <text class="text" x=0 y=100>That's a circle</text>
  </g>
</svg>

question from:https://stackoverflow.com/questions/65831517/hover-one-element-of-linked-elements

Answer 1

Your description seems a bit strange: What you wrote means that the circle should always be visible (1,2,3) and the text should only appear when the circle is hovered (2), which is quite easy:

text {
  opacity: 0;
}

circle:hover + text {
  opacity: 1;
}

<svg width="250" height="250">
  <g class="shape_text">
      <circle cx="30" cy="45" r="25" />
      <text class="text" x=0 y=100>That's a circle</text>
  </g>
</svg>