Link zum Rollover-Skript hinzufügen - css, rollover

Ich habe ein reines CSS-Rollover-Skript, bei dem es sich um eine Reihe von Bildern handelt, die jeweils in ihren eigenen divs gehalten werden. Beim Schweben wird das Hintergrundbild nach oben verschoben, sodass sich das Bild theoretisch ändert.

Ist es möglich, einen Link zum Bild hinzuzufügen? Bei den Bildern handelt es sich um Kontaktsymbole Facebook, Twitter, Website usw., so dass der Benutzer im Idealfall auf das Symbol klicken und zu diesem Link gelangen kann.

Ich dachte mir das Hinzufügen <a ref=........</a> nach und vor den div-Tags funktionierten die Tags jedoch nicht, dh der Link wird nicht erkannt und kann nicht angeklickt werden.

HTML

<div class="fbook-hover social-slide"></div>

CSS

.social-slide {
height:300px;
width: 250px;
margin: 10px;
float: left;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
transition: all ease 0.3s;
}
.social-slide:hover {
background-position: 0px -300px;
}
.fbook-hover {
background-image: url("/images/smedia/fbook.png");
}

JSFIDDLE http://jsfiddle.net/26B3h/1/

Antworten:

Sie haben es richtig gemacht, statt "ref" müssen Sie "href" verwenden.

http://jsfiddle.net/jonigiuro/26B3h/3/

 <a href="http://www.google.com" target="_blank"><div class="fbook-hover social-slide"></div></a>