html - Change image on mouse over with CSS not working -

using css, image/link changes mouse moves on it. don't understand why code below not working. @user.twitter have value. since link has no text, image, i'm bit uncertain place first value behing brackets. stands, no image @ shows on screen. wrong code below?

html code:

<%= link_to("", @user.twitter, :class => "twitter") %> 

css:

.twitter {   width: 20px;   height: 20px;   background: image-url('twitter.png'); } .twitter:hover {   background: image-url('twitter_.png'); } 

update: if check page's source code is:

<a class="twitter" href="http://www.example.com"></a> 

it's hard sure without demo actual html & css css malformed.

also, link need inline-block or block rather default display:inline

.twitter {    width: 20px;    height: 20px;    background-image: url(http://4.bp.blogspot.com/-hkpt3jsknwa/txcu2eo0a-i/aaaaaaaaaly/0euq2m85px8/s000/twitter.png);    background-size: cover;    display: inline-block;  }  .twitter:hover {    background-image: url('http://www.easychirp.com/images/share/twitter.png');  }

<a class="twitter" href="http://www.example.com"></a>