Text on a rectangle kills the rectangle's hover effect - css

Question

I have several svg rectangles with an hover effect, the background-color of the rectangles gets changed when the mouse is over them. The hover effect is set via css:
.myclass:hover {
fill: rgb(255,128,0);
}
Apart from that, text is placed above each of the rectangles. A pair of text and rectangle define a group.
<g>
<rect class="myclass" x="10" y="10" width="40" height="40" />
<text x="30" y="40" font-family="Verdana" font-size="10" fill="blue">ESC</text>
</g>
The hover effect works fine, but only if the cursor is not exactly above the text. If it is exactly above the text, then the hover effect vanishes.
How could I fix that?
Here a screenshot: on the left you can see the hover effect (background is orange), on the right you can see how the effect vanishes if the cursor hits the text on the rectangle:
Thank you

Answer 1

You need to make the text have pointer-events="none" so that it's ignored by the hover.
<g>
<rect class="myclass" x="10" y="10" width="40" height="40" />
<text x="30" y="40" font-family="Verdana" font-size="10" fill="blue" pointer-events="none">ESC</text>
</g>

Answer 2

The problem is the hover is assigned to element that sits behind the text. So when you're hovering over the text, you're technically NOT touching the background anymore.
My suggestion would be to apply the class to the parent element, and assign the hover to that.
<g class="myclass">
<rect x="10" y="10" width="40" height="40" />
<text x="30" y="40" font-family="Verdana" font-size="10" fill="blue">ESC</text>
</g>
Now your CSS would look like this, to target the child "rect" element:
.myclass:hover rect {
fill: rgb(255,128,0);
}