如何使用<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/