CSS ile Popup açma (javascript kullanmadan)

[Φ karavizir]

Html kodu gayet basit :

 

<p>

<a href="#">Hover Me!

<span>I'm a popup...</span>

</a>

</p>

 

 

popupun kodunu span elemanin içine koyun

 

 

CSS böyle yazilir :

 

a{

color:#ccc;

text-shadow:0 -1px 0 black;

}

a:hover,a:focus{

background:rgba(0,0,0,.4);

box-shadow:0 1px 0 rgba(255,255,255,.4);

}

 

 

a span{

position:absolute;

margin-top:23px;

margin-left:-35px;

color:#09c;

background:rgba(0,0,0,.9);

padding:15px;

border-radius:3px;

box-shadow:0 0 2px rgba(0,0,0,.5);

transform:scale(0) rotate(-12deg);

transition:all .25s;

opacity:0;

}

 

 

a:hover span, a:focus span{

transform:scale(1) rotate(0);

opacity:1;

}

 

Firefox ve Chromeda iyi çalışıyor

 

tek sorunu IE de popup açılmıyor.

gösteri için özel sitemin adresini koyardim ama forumda yeni oldugum için olmuyor!

[Φ remixindir]

Teşekkürler işim yaradı.