Как создать кликабельный CSS спрайт с <a>вместо Javascript?

Question

Вот пример кликабельного CSS-спрайта, реализованного с помощью Javascript:

Демонстрация в реальном времени здесь.

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

Вы задали свой вопрос в запутанном виде, но ответ прост:

• Измените 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 2

Используя элемент <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 3

@ миша, отметьте галочкой http://jsfiddle.net/sandeep/t629m/7/

главное, что вам нужно display:block в <a> теге

потому что <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> и добавьте отображение: блок или аналогичный вашему CSS.

Пример здесь.

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

Answer 5

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

Кажется, работает нормально.Живая демоверсия: http://jsfiddle.net/vuZz4/