user3116167 user3116167 - 1 year ago 106
CSS Question

Change background-color in svg-imge with text inside it

Image with some text inside it. On hover the svg changes background color except when hovering over the text inside it.

How can I make the svg-background change when hovering over the text also?

<svg class="svg">
<polygon class="polygon" points="100,10 40,198 190,78 10,78 160,198">
<text class="number" x="85" y="115">456</text>

.svg {

.svg .polygon {
fill: red;
.svg .polygon:hover {
fill: blue;
.svg .number {
font-size: 19px;

Answer Source

To achieve this, you need to add pointer-events: none; to your <text> tag.


.svg .number {
  font-size: 19px;
  pointer-events: none; /* <-- Add This */


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download