Merhaba arkadaşlar iyi forumlar. Boş durmamak adına bir website yapıyorum ve şöyle bir özellik yaptım:
Sitenin sağ üstünde “İletişim” yazısı var ve mouse üzerine geldiğinde yukarıdan (görülmeyen kısımdan) bir div aşağı iniyor ve içinde bilgi veren bir yazı yazıyor. Bu özelliği, bilgisayarlarda (Chrome ve Opera’da) test ettim, gayet güzel çalışıyor. Android’de ise Samsung’un kendi tarayıcısı ve Chrome’da çalıştırdım, ama IOS’te (iPhone 7 ve 6S’te denedim) bir türlü çalıştıramadım. Kodlarım aşağıda, yardımcı olursanız çok sevinirim, şimdiden teşekkürler.
#header-iletişim {
float: right;
cursor: pointer;
font-size: 40px;
color: rgb(0, 0, 0);
margin: 8px 12.5% 8px 0px;
border-radius: 5px;
position: relative;
}
#slide-text {
display: block;
position: absolute;
font-size: small;
left: 0px;
color: white;
height: 200px;
width: 100%;
padding-top: 10%;
background-color: rgb(71, 71, 71);
text-align: center;
opacity: 0;
top: -550px;
border: 2px solid white;
transition: top .5s ease, opacity 2s ease;
-webkit-transition: top .5s ease, opacity 2s ease;
-moz-transition: top .5s ease, opacity 2s ease;
-o-transition: top .5s ease, opacity 2s ease;
-ms-transition: top .5s ease, opacity 2s ease;
}
#header-iletişim:hover #slide-text {
background-color: rgb(71, 71, 71);
color: white;
cursor: pointer;
top: 0px;
opacity: 1;
}
header-iletişim: Mouse’nin üzerine gelidiği div.
slider-text: aşağıya doğru kayan div.
Bir de garantiye almak için :focus özelliğini de kullanmıştım.
#header-iletişim:focus #slide-text {
background-color: rgb(71, 71, 71);
color: white;
cursor: pointer;
top: 0px;
opacity: 1;
}
Ekleme:
IOS’te Safari’de çalışmıyor, Chrome’da sorunsuz çalışıyor.
Olmadığı için onları ekledim 