Question

我有一个问题是为页面添加当前（活动）动态状态的sprite（活动状态应该是圆形）。请检查一下。

.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/页上查看谢谢你的帮助。

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属性并写下其余的元素

如何将活动的curent状态应用于CSS sprite？

1 个答案: