Is that possible to do the same (hover effect) without Javascript (only CSS)?

Question

I'm trying to create a button with icon like this:

HTML:

<div id='button'>
    <div class='icon'></div>
    <span>Send Email</span>
</div>

CSS:

#button {
    width: 270px;
    height: 50px;
    font-size: 1.4em;
    color: #333;
    background-color: #555;
    position: relative;
}
#button > .icon {
    width: 61px;
    height: 39px;
    background-image: url('http://i55.tinypic.com/2agsutj.png');
    background-repeat: no-repeat;
    background-position: 0px 0px;
    position: absolute;
    left: 40px;
    top: 5px;
}
#button > span {
    position: absolute;
    left: 130px;
    top: 10px;
}
#button:hover {
    color: #fff;
    cursor: pointer;
}

JS:

$(function() {
    $('#button').hover(function() {
        $('#button > .icon').css('background-position', '0px -39px');
    }, function() {
        $('#button > .icon').css('background-position', '0px 0px');
    });
});

My question is: Is Javascript really necessary for such simple functionality, or it can be done using CSS only ?

Answer 1

There's a :hover pseudoclass for that.

#button:hover > .icon {
    background-position: 0px -39px;
}

http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes
http://www.w3schools.com/css/pr_pseudo_hover.asp

Answer 2

Ya 100%

Working demo link

in the above example you need to use hover and shift

background position

uisng css. you can do it without javascript for sure.

here is working solution dont require any javascript

html

<div id='button'>
    <span class='icon'>Send Email</span>
</div>

css

​#button span{
    display:block;
    padding-left:80px;
    font-size: 1.4em;
    color: #333;
    background-color: #555;
    line-height:1.4em;
}
#button span.icon{
    background-image: url('http://i55.tinypic.com/2agsutj.png');
    background-repeat: no-repeat;
    background-position: 0px 0px;
    width:120px;
    height:39px;
}
#button:hover span{
color:#fff;
}n
#button:hover span.icon{
    background-image: url('http://i55.tinypic.com/2agsutj.png');
    background-repeat: no-repeat;
    background-position: 0px -39px;

}

​