Question

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

是否可以添加图像链接？图像是联系人图标Facebook，Twitter，网站等。所以理想情况下，当用户悬停时，用户可以点击图标并转到该链接。

我认为在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

你做得对，而不是“ref”你需要使用“href”

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

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

添加链接到翻转脚本

1 个答案: