如何使用 创建可点击的 CSS 精灵而不是 JavaScript？

Question

以下是使用 Javascript 实现的可点击 CSS 精灵的示例：

此处为实时演示。

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 实现相同的效果？

（我能想到的唯一方法是使用 ，但如何使用？）

Answer 1

对于 元素，为其指定 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/

Answer 2

您以一种令人费解的方式提出了问题，但答案很简单：

• 将 div 更改为 a。
• 将 display: block 应用于 a。

参见： http://jsfiddle.net/65HdK/

<a href="http://google.com/"></a>

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

    display: block
}
a:hover {
    background-position: -100px -100px;
}

Answer 3

@misha，检查类似 http://jsfiddle.net/sandeep/t629m/7/

最主要的是你必须在 标签中 display:block

因为 是一个 内联元素
例子：

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

Answer 4

<a href="http://google.com"><div></div></a>

似乎工作正常。现场演示：http://jsfiddle.net/vuZz4/

Answer 5

只需将其更改为 并添加 display:block 或类似的 css 即可。

例子在这里。

http://jsfiddle.net/blowsie/t629m/11/