【问题标题】:Change background-color in svg-imge with text inside it更改 svg-image 中的背景颜色,其中包含文本
【发布时间】:2016-08-02 01:19:47
【问题描述】:

里面有一些文字的图片。悬停时 svg 会更改背景颜色,除非将鼠标悬停在其中的文本上。

如何在将鼠标悬停在文本上时也更改 svg-background?

<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;
}

https://jsfiddle.net/king_s/kcoetje0/

【问题讨论】:

    标签: javascript html css svg


    【解决方案1】:

    为此,您需要将pointer-events: none; 添加到您的&lt;text&gt; 标记中。

    CSS

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

    JSFiddle

    【讨论】:

    • 非常感谢就像一个魅力 - 我会接受。
    • @user3116167 没问题!很高兴帮助:)
    猜你喜欢
    • 2015-09-09
    • 2023-03-14
    • 2022-01-07
    • 1970-01-01
    相关资源
    最近更新 更多