我有一个纯 css 翻转脚本,它是一系列图像,每个图像都保存在自己的 div 中,悬停时,背景图像会向上滑动,因此理论上图像会发生变化。
是否可以添加指向图像的链接?这些图像是 facebook、twitter、网站等联系人图标,因此理想情况下,用户可以在悬停时单击图标并转到该链接。
我认为<a ref=........</a>
在 div 标签之后和之前添加会起作用,但这并没有做任何事情,即。该链接无法识别,无法点击。
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/