Effect How to - Change background image offset position when hover

Question

We would like to know how to change background image offset position when hover.

Answer


<html>
<head>
<style>
a.button1 {<!--from  www . j  a va2  s.c om-->
    float: left;
    height: 398px;
    margin: 59px 0px 0px 17px;
    background-image: url("http://www.java2s.com/style/download.png");
    text-indent: -9999px;
    display: inline-block;
}

a#about-button {
    width: 340px;
    background-position: 0px 0px;
}

a#about-button:hover {
    background-position: 0px -796px;
}

a#about-button:active {
    background-position: 0px -398px;
}
</style>
</head>
<body>
    <div class="button">
    <p>
        <a href="about.html" class="button1" id="about-button" image></a>
    </p>
    </div>
</body>
</html>

The code above is rendered as follows: