Почему не меняется фоновая картинка?

Question

[MeMoJlor]

Есть иконка гамбургера.
<a class="hum" href="#">

.hum {
  background: url(icons/humburger.svg);
  background-size: 100%;
}

При добавлений класса, должна менятся иконка:
<a class="hum hum2" href="#">

.hum2 {
  background: url(icons/close.svg);
  background-size: 100%;
}

На компе и Сафари иконки меняются, а в мобильном хроме ничего не происходит. Из-за чего может быть такое поведение?

Comments

[WapSter]

Из-за кэша

[MeMoJlor]

WapSter, не помогло

[user_tm]

может быть все дело в вендорных префиксов, погуглите эту тему

[Ankhena]

Раз в каких-то браузерах картинка меняется, то дело не в специфичности селекторов.
И идеи про important и .hum.hum2 можно отмести.

Возможно, дело в самом скрипте, который добавляет эти классы.
Либо кеш.

Сделаете песочницу на jsfiddle.net, позовите, посмотрим.

Answer 1

[good_beginer]

.hum2 {
  background: url(icons/close.svg)!important;
  background-size: 100%;
}

но проще менять JS-ом

Comments

[Ankhena]

Правильно: js'ом добавлять класс, а что происходит в этом классе писать в css.
Желательно без important. Благо тут нет проблем обойтись без него.

[MeMoJlor]

Спасибо. Почему нежелательно использовать important?

[MeMoJlor]

Вот только снова же иконка не отображается(.

[Ankhena]

MeMoJlor, я вам в комментариях написала, что дело не в селекторах.

!important плохо, потому что подумайте, что вы будете делать, если захочется снова перебить стили?