如何将活动状态应用于CSS精灵？

Question

我有一个问题，需要为页面添加动态状态的精灵（当前活动状态应该在圆形中）。请检查一下。

.language{
  display: inline;
  width: 100%;
  float: right;
  margin-bottom: 92px;
  list-style-type: none;
}

.lang-c{
  width: 34px;
  height: 34px;
  text-indent: -10000px;
  float: right;
  margin-left: 20px;
}

.lang-en {
  background: url("http://aero.artnova.com.pl/wp-content/uploads/2016/08/lang-en.png") no-repeat top left;
}
.lang-en:hover {
  background: url("http://aero.artnova.com.pl/wp-content/uploads/2016/08/lang-en.png") no-repeat 0 -34px;
}
.lang-pl {
  background: url("http://aero.artnova.com.pl/wp-content/uploads/2016/08/lang-pl.png") no-repeat top left;
}
.lang-pl:hover {
  background: url("http://aero.artnova.com.pl/wp-content/uploads/2016/08/lang-pl.png") no-repeat 0 -34px;
}
.lang-ru {
  background: url("http://aero.artnova.com.pl/wp-content/uploads/2016/08/lang-ru.png") no-repeat top left;
}
.lang-ru:hover{
  background: url("http://aero.artnova.com.pl/wp-content/uploads/2016/08/lang-ru.png") no-repeat 0 -34px;
}

<ul class="language">
  <a href="http://aero.artnova.com.pl/?lang=ru"><li class="lang-c lang-ru"></li></a>
  <a href="http://aero.artnova.com.pl/?lang=pl"><li class="lang-c lang-pl"></li></a>
  <a href="http://aero.artnova.com.pl/"><li class="lang-c lang-en"></li></a>
</ul>

您还可以在页面http://aero.artnova.com.pl/上进行检查。感谢您的帮助。

- kotos

---

如果此本地化是在客户端上完成的，您应该通过JavaScript触发一个类来激活它，否则应该在服务器渲染上完成。然后，通过CSS，您可以为该类设置样式。 - Juan Ferreras

此外，a 必须在 li 内部。 - 3rdthemagical

你不能使用JS来完成这个任务，因为网站在点击后会刷新。你应该在PHP的语言切换模板中添加活动类。 - daymosik

@3rdthemagical 没有理由<li>不能在<a>内部。 - user2267175

也许有什么PHP高手知道如何解决，并能快速编写解决方案 :) - kotos

提示：我使用WPML插件https://wpml.org/documentation/getting-started-guide/language-setup/custom-language-switcher/ - kotos

Answer 1

你可以使用CSS来激活它，只需要像这样使用：

html:lang(pl-PL) .lang-pl{
  background: url("http://aero.artnova.com.pl/wp-content/uploads/2016/08/lang-pl.png") no-repeat 0 -34px;
}

你需要找到 lang 属性并为其他元素编写。

- Maharajan