Предложение / помощь по изменению фонового изображения при наведении

Это самый простой способ: Fiddle, и он использует этот лист спрайтов: http://i.imgur.com/wKT9VON.png

Есть два способа сделать это. Легкий способ - использовать CSS, например:

#mylink-1 {
  background: transparent url('/img/my-img.png') 0 0 no-repeat;
}

  #mylink-1:hover {
    background: transparent url('/img/my-img-over.png') 0 0 no-repeat;
  }

#mylink-2 {
  background: transparent url('/img/my-img-2.png') 0 0 no-repeat;
}

  #mylink-2:hover {
    background: transparent url('/img/my-img-2-over.png') 0 0 no-repeat;
  }

Или, используя лист спрайта:

#mylink-1 {
  background: transparent url('/img/my-img.png') 0 0 no-repeat;
}

  #mylink-1:hover {
    background: transparent url('/img/my-img-over.png') 0 -20px no-repeat;
  }

Второй способ - JavaScript. Если вы используете jQuery:

$('#mylink-1').on('hover', function() {
  $(this).css({ background: 'transparent url("/img/my-img-over.png") 0 0 no-repeat' });
});

Если у вас их много, и назовите изображения цифрами или используйте спрайты, вы можете сделать что-то вроде этого:

var i = 1;

// Non-sprite
#('.mylinks').each(function() {
  $(this).css({ background: "transparent url('/img/my-img-' + i +'-over.png') 0 0 no-repeat" });
  i++;
});

var i = 0;

// Using sprites
#('.mylinks').each(function() {
  $(this).css({ background: "transparent url('/img/my-img-over.png') 0 ' + i + 'px no-repeat" });
  i -= 20;
});

Вы можете просматривать 100 примеров, когда вы предлагаете google tour ques.. Во всяком случае, я предлагаю вам взглянуть на следующие вопросы, которые могут вам помочь.. 1, 2, 3

Почему вы не делаете это в css?

#button1:hover
{
    background: url(/image/btn1.png) no-repeat;
}
#button2:hover
{
    background: url(/image/btn2.png) no-repeat;
}
#button3:hover
{
    background: url(/image/btn3.png) no-repeat;
}