css - アンカーのスタイリングに問題がある

Question

次のようなスタイリングを行いました

/*------------this css is an internal css in the html page-------------*/

<style>
.rating_star
  {
      background-image: url('<?php echo base_url();?>assets/front_assets/images/star_hv.gif');
  }

.rating_star hover
  {
      background-image: url('<?php echo base_url();?>assets/front_assets/images/star.gif');
  }
</style>

HTML 部分は次のとおりです。

<a href="javascript:void(0);" onclick="
        var i='<?php echo base_url();?>assets/front_assets/images/loading.gif';
        var load = document.createElement('img');
        load.setAttribute('src', i);

        $('#rate').html(load);
        $.post('<?php echo base_url();?>rating/rate'
             {'star':1,'item_slug':$('#item_slug').val()},
               function(data){$('#rate').html(data););" class="rating_star">&nbsp;
</a> 

問題は、 a の上にカーソルを置いても、画像がhref表示されないことです。変更はありません。