Change image on mouse over with CSS not working - html

Question

Using CSS, I would like an image/link that changes as the mouse moves over it. I don't understand why the code below is not working. #user.twitter does have a value. Since the link has no text, only an image, I'm a bit uncertain what to place as the first value behing the brackets. As it stands, no image at all shows up on the screen. What is wrong with the 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 I check the page's source code it is:
<a class="twitter" href="http://www.example.com"></a>

Answer 1

It's hard to be sure without a demo with the actual HTML & CSS but your CSS is slightly malformed.
Also, the link would need to be inline-block or block rather than the 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>

Answer 2

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

Answer 3

Here's my CSS:
.twitter {
width: 20px;
height: 20px;
background-image: url('twitter.png');
}
.twitter:hover {
background-image: url('twitter-hover.png');
}