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">
</polygon>
<text class="number" x="85" y="115">456</text>
</svg>
.svg {
}
.svg .polygon {
fill: red;
}
.svg .polygon:hover {
fill: blue;
}
.svg .number {
font-size: 19px;
}
To achieve this, you need to add pointer-events: none;
to your <text>
tag.
CSS
.svg .number {
font-size: 19px;
pointer-events: none; /* <-- Add This */
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.