0

私は純粋な css ロールオーバー スクリプトを持っています。これは、それぞれが独自の div に保持されている一連の画像であり、ホバーすると、背景画像がスライドして理論的に画像が変化します。

画像にリンクを追加することは可能ですか？画像は Facebook、Twitter、Web サイトなどの連絡先アイコンです。理想的には、ホバー時にユーザーがアイコンをクリックしてそのリンクに移動できるようにします。

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/

4

1 に答える 1

0

「ref」の代わりに「href」を使用する必要があります。

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

 <a href="http://www.google.com" target="_blank"><div class="fbook-hover social-slide"></div></a>
于 2013-08-28T13:21:33.187 に答える