css - 如何将数据从json传递到css？

Question

我的元素中有一个图像文件夹，里面有一些图像

img> auto_active.png ,auto_inactive.png 

还有一个像这样的json文件

[
{"key":auto},
{"key":car}
]

和那样的Html

<div class="india">
<img src="{{key}}_active.png"

</div>

我想在悬停时更改图像，所以我使用这样的 css

.india:hover{
 background-image: url("img/{{key}}_inactive.png");

}

但是这种方法不能完全使用 css 绑定(bind)键。我如何将 json 键与 css 绑定(bind)以在悬停时更改图像？

Answer 1

but this approach is not use-full to bind key with css.how can i bind json key with css to change image on hover?

为 auto 和 car 创建不同的 CSS 类，并在 img 上切换类。