html - 如何使用 <a> 而不是 Javascript 创建可点击的 CSS Sprite ？

Question

这是一个用 Javascript 实现的可点击 CSS Sprite 的例子:

Live demo here.

HTML:

<div></div>

CSS:

div {
    width: 100px;
    height: 100px;
    background-image: url(http://perfectwebtutorials.com/wp-content/uploads/2011/03/spritecss.png);
    background-position: -300px -100px;
}
div:hover {
    background-position: -100px -100px;
}

JS:

$(function() {
    $('div').click(function() {
        window.location = "http://google.com";
    });
});

没有 Javascript 是否有可能达到同样的效果？

(我能想到的唯一方法是使用 <a href="..."> ，但如何使用？)

Answer 1

带有 <a>元素，给它一个href和 display: inline-block ，以及您设置的所有其他 CSS 属性。

a {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-image: url(http://perfectwebtutorials.com/wp-content/uploads/2011/03/spritecss.png);
    background-position: -300px -100px;
}
a:hover {
    background-position: -100px -100px;
}

工作演示:http://jsfiddle.net/t629m/13/