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

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 su开发者_运维百科ch simple functionality, or it can be done using CSS only ?

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

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;

}

​

I've made a jsfiddle with "a" tag so hover works in IE too.

<div id="button">
<a href="#text" name="text">Send Email</a>
</div>

The CSS

#button {
    width: 270px;
    height: 45px;
    font-size: 1.4em;
    background-color: #555;
    position: relative;

    padding-left: 45px;
    padding-top: 15px;    
}

#button a {
    text-decoration:none;
    color:#333;
    padding:5px;
    padding-left: 65px;
    background-image: url('http://i55.tinypic.com/2agsutj.png');
    background-repeat: no-repeat;
    background-position: 0px 0px;    
}

#button a:hover {
   background-position:0px -39px;
   color: #fff;
}