Как да промените цвета на изображение с ефект на задържане (CSS)?

Опитвам се да задам ефект на задържане върху изображение, така че да променя цвета си, когато мишката е върху него. Това е моят html:

  <div class="col s4">
  <ul id="social">
  <li id="fb"></li>
  <li id="tw"></li>
  <li id="em"></li>
  <li id="fa"></li>
  </ul>
  </div>

И това е моят CSS:

ul#social li#fb {
    height:32px;
    width:32px;
    background-image:url(../img/social/Facebook-icon-(1).png);
}

ul#social li#fb:hover{
    background-image:url(../img/social/Facebook-icon.png);
}

[...]

Първото фоново изображение е черно-бяло, второто е цветно. За съжаление обаче моят код не работи: не показва изображението в черно и бяло. Ако се наложи като фоново изображение, цветното изображение мога да го видя правилно, но ефектът при задържане няма да работи така или иначе.

Къде греша?


image html css hover effect
person andy    schedule 25.05.2015    source източник
comment
можете да опитате да направите едно изображение, което има двете състояния, като показва първото нормално en, променяйки фоновата позиция на :hover   -  person Mark    schedule 25.05.2015
comment
Предполагам, че () в името на вашето изображение е причината това да се случи   -  person Mark    schedule 25.05.2015
comment
работещ jsfiddle.net/soledar10/b320darL   -  person Dmitriy    schedule 25.05.2015

Отговори (1)


arrow_upward
2
arrow_downward

Проблемът не е в :hover, така че вероятно е в пътя на вашето изображение.

Поставих вашия код в тази цигулка, променяйки само background-image на background-color и можете да видите, че се променя от червено на зелено, когато мишката ви е върху него.

person lucasnadalutti    schedule 25.05.2015