Как изменить цвет изображения с помощью эффекта наведения (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);
}

[...]

Первое фоновое изображение черно-белое, второе — цветное. Однако, к сожалению, мой код не работает: он не отображает изображение черно-белым. Если наложить в качестве background-image цветное изображение, я его правильно увижу, но эффект наведения все равно не сработает.

Где я не прав?


image html css hover effect
person andy    schedule 25.05.2015    source источник
comment
вы можете попытаться сделать одно изображение, которое имеет два состояния in, отображая первый нормальный 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