How to make an animation on hover?

Question

css

Good afternoon!
Faced such a problem that when hovering over an element, animation occurs for several elements.
That is, there is HTML code, below is an example structure.

<div class="block">
  <p class="item">Text</p>
</div>
<div class="block">
  <p class="item">Text</p>
</div>
<div class="block">
  <p class="item">Text</p>
</div>
<div class="block">
  <p class="item">Text</p>
</div>

And when you hover over .block, .item should change color, but when you hover over .block, the color of all .item changes.
In real code, there are more elements and the code itself is larger, so I made such an example.
In real code, you need to change the fill color of the path in svg when hovering over a block (there are 4 such blocks), each block has its own svg.

What is the problem? And how to solve it?

The code

Answer 1

What? https://codepen.io/aliencash/pen/bGVrZvq

Answer 2

Here: click