В jQuery правильнее так:

$(document).ready(function(){
 $("li").mouseenter(function(){
      $( i,this).css({"background-image": "url(assets/blue-icon.png)"});
    }).mouseleave(function(){
      $( i,this).css({"background-image": "url(assets/white-icon.png)"});
    });
});

Hover — трясёт при наведении на краях

Простая денежная идея — изготовление табличек интерактивно:
Задаём исходные колво строк в таблице и ячеек в строке,
Далее растягиваем ячейку мышкой на нужное кол-во row и span( каждая редактируемая ячейка полупрозрачна(видны нижнее основание с первичной разметкой и обладает собственным цветом, при отпускании мышки нижний угол выравнивается по углу ближайшей ячейки. Новая редактируема ячейка — с новым цветом полупрозрачности, итоговая табличка оплачиваяецо по смс и пользователь получает код таблички(с сервера) и бонус на создание второй — бесплатно!
Да — заготовка/редактирование таблички идёт в div или канвас, посколь такой промежуточный код не имеет ценности для попутных краж.