Почему свойство background «затмевает» свойство background-color?
background: -webkit-linear-gradient(bottom, #87C03B, #98D647);
такую запись браузер читает как background-image: -webkit-linear-gradient(bottom, #87C03B, #98D647);
background-color меняетcя, но под градиентом этого не видно. Можете проверить, поставив один из цветов в transparent;
Возможно, потому что background является сборным свойством:background: [background-attachment || background-color || background-image || background-position || background-repeat]
в background включен background-image (gradient). При hover цвет меняется, но он меняется под градиентом. Поэтому этого не видно.