添加链接到翻转脚本

Question

我有一个纯CSS的翻转脚本，它是一系列图像，每个图像都保存在自己的div中，悬停时，背景图像向上滑动，以使图像在理论上发生变化。

虽然可以添加图片链接吗？这些图像是联系人图标脸书，推特，网站等，所以理想的悬停用户可以点击图标并转到该链接。

我想在div标签可以工作之前和之后加入<a ref=........</a>，但是这并没有做任何事情，即。该链接无法识别并且无法点击。

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/

Answer 1

你正在做的是正确的，而不是 “裁判”，你需要使用的 “href”

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

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