单击SVG元素时应用CSS样式

我正在尝试为单击的元素设置CSS样式。我尝试将

:active

:clicked

:target

与类名放在一起，但这些都不起作用<代码>：悬停效果很好。谢谢你的回答

HTML:

我正在尝试为单击的元素设置CSS样式

实现这种效果的一种方法是给元素一个

HTML5自定义数据-*

属性，如下所示：

data-clicked="false"

然后可以使用javascript检测对元素的单击并更新属性

要使用javascript检测单击，请使用：

myElement.addEventListener('click', myFunction, false);

要修改属性，请使用：

myElement.dataset.myAttribute = myValue;

工作示例：

const-box=document.getElementsByClassName（'box'）；
常量showClick=（e）=>{
event.target.dataset.clicked='true'；
}
for（设i=0；i

.box{
显示：内联块；
宽度：100px；
高度：100px；
利润率：6px；
背景色：rgb（255,0,0）；
光标：指针；
}
.box：：之后{
内容：“点击我！”；
显示：块；
文本对齐：居中；
线高：100px；
颜色：rgb（255、255、255）；
字体大小：粗体；
}
.box[单击数据=“true”]{
颜色：rgb（255,0,0）；
背景色：rgb（255，255，0）；
}
.box[单击数据=“true”]：：之后{
内容：“点击！”；
颜色：rgb（255,0,0）；
}

---

在代码中，您希望覆盖内联css。要更改颜色，您需要删除

填充的内联样式。接下来是一个例子：


svg{边框：实心；宽度：90vh；}
.e-image{转换：.2s填充；}
.lankstumas:hover.e-image{fill:skyBlue；}
.lankstumas:hover.e-text{fill:#fff；}

朗克斯-图马斯
好吧，它没有完全按照您的建议工作，但是这个想法很好。我在CSS文件中添加了
.box
类，其内容与悬停效果相同。还向
元素添加了
[ngClass]=“{'box”：clicked14}”
。我想我现在可以把这个标记为解决了。
myElement.addEventListener('click', myFunction, false);

myElement.dataset.myAttribute = myValue;