如何使用<a>而不是 Javascript 创建可点击的 CSS 精灵？</a>

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是否可以实现相同的目标？

（我能想到的唯一方法是使用<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/

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/

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

因为<a>是一个inline element示例：

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

只需将其更改为<a>并添加 display:block 或类似于您的 css。

这里的例子。

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