Mouse üzerine gelince kayan div nasıl yapılır?

27.02.2016 17:41

KeyfiPaylasim 53 Kullanıcı

Üyelik 19.02.2016
Yaş/Cinsiyet 33 / E
Meslek Öğrenci
Konum İstanbul Anadolu

Ad Soyad E** G**
Mesajlar 193
Beğeniler 12 / 46
Ticaret 0, (%0)

Selam herkese, ufak bir düşüncem var da internette nasıl araştıracağımı bilemedim yanlış kelimeleri mi seçiyorum bilmiyorum ama hep mouse'u üzerine getirince açılır kutu v.s gibi sonuçlar ile karşılaştım. Bunu daha önce bir sitede görmüştüm, hangi site olduğunu bulsam zaten mevzuyu çözücem ama bulamadığım için buraya yazma gereği duydum. Bilgi sahibi olanların tecrübelerinden faydalanmak isterim.

Şimdi yapmak istediğim şey şu şimdi iki adet div'im var.
Birisi a div'i olsun diğeri b div'i.
B div'im a'divinin biraz üzerini işgal ediyor. :) A div'ine mouse'u götürünce B divim aşağıya kayıp A'divinin gözükmesine müsade edecek. Mouse gidince geri yerine gelecek.

Görselleştirdim daha net anlaşılması için.

Normalde divler

Mouse üzerine gelince divler

27.02.2016 17:52

#2

rootyetkiliadam WM Aracı Kimlik Onayı

Üyelik 16.09.2015
Yaş/Cinsiyet 32 / E
Meslek IT Staff, Jr. Sysadmin
Konum İstanbul Avrupa

Ad Soyad U** K**
Mesajlar 407
Beğeniler 1 / 104
Ticaret 0, (%0)

Kesin olmamakla birlikte, hareket edecek olan div'e link özelliği vermek şartıyla aşağıdaki CSS kodları belki işe yarayabilir...

.b_div a {
    padding-top: 0;
}

.b_div a:hover {
    padding-top: 20px;
}

Piksel değerini kendinize göre değiştirirsiniz.

27.02.2016 17:59

#3

KeyfiPaylasim 53 Kullanıcı

Üyelik 19.02.2016
Yaş/Cinsiyet 33 / E
Meslek Öğrenci
Konum İstanbul Anadolu

Ad Soyad E** G**
Mesajlar 193
Beğeniler 12 / 46
Ticaret 0, (%0)

rootyetkiliadam adlı üyeden alıntı

Kesin olmamakla birlikte, hareket edecek olan div'e link özelliği vermek şartıyla aşağıdaki CSS kodları belki işe yarayabilir...

.b_div a {

    padding-top: 0;

}



.b_div a:hover {

    padding-top: 20px;

}

Piksel değerini kendinize göre değiştirirsiniz.

Hocam dediğiniz mantıklı fakat öyle pat diye insin istemiyorum estetik olsun biraz. Hani javascript ile mi olur bu bilmem ama hafif yavaşça kaysın aşağıya. Bilginiz varmı ?

27.02.2016 18:07

#4

rootyetkiliadam WM Aracı Kimlik Onayı

Üyelik 16.09.2015
Yaş/Cinsiyet 32 / E
Meslek IT Staff, Jr. Sysadmin
Konum İstanbul Avrupa

Ad Soyad U** K**
Mesajlar 407
Beğeniler 1 / 104
Ticaret 0, (%0)

Maalesef bu konuyla ilgili bilgim yok. Ancak JavaScript, jQuery kütüphaneleri kullanılarak yapılabilir elbette.

Biraz araştırayım, bir şeyler bulursam paylaşırım... ;)

27.02.2016 18:08

#5

KeyfiPaylasim 53 Kullanıcı

Üyelik 19.02.2016
Yaş/Cinsiyet 33 / E
Meslek Öğrenci
Konum İstanbul Anadolu

Ad Soyad E** G**
Mesajlar 193
Beğeniler 12 / 46
Ticaret 0, (%0)

rootyetkiliadam adlı üyeden alıntı

Maalesef bu konuyla ilgili bilgim yok. Ancak JavaScript, jQuery kütüphaneleri kullanılarak yapılabilir elbette.

Biraz araştırayım, bir şeyler bulursam paylaşırım... ;)

Teşekkür ederim ben de bir yandan arıyorum. :rolleyes:

27.02.2016 18:10

#6

rootyetkiliadam WM Aracı Kimlik Onayı

Üyelik 16.09.2015
Yaş/Cinsiyet 32 / E
Meslek IT Staff, Jr. Sysadmin
Konum İstanbul Avrupa

Ad Soyad U** K**
Mesajlar 407
Beğeniler 1 / 104
Ticaret 0, (%0)

Buldum bile!

Buyurun

27.02.2016 18:12

#7

KeyfiPaylasim 53 Kullanıcı

Üyelik 19.02.2016
Yaş/Cinsiyet 33 / E
Meslek Öğrenci
Konum İstanbul Anadolu

Ad Soyad E** G**
Mesajlar 193
Beğeniler 12 / 46
Ticaret 0, (%0)

rootyetkiliadam adlı üyeden alıntı

Buldum bile!

Buyurun

Oo ufak düzenleme ile fazlasıyla işimi görür. Çok teşekkür ederim hocam.

27.02.2016 18:12

#8

asonons WM Aracı Kullanıcı

Üyelik 27.05.2015
Yaş/Cinsiyet 29 / E
Meslek Wordpress
Konum Balıkesir

Ad Soyad Ç** U**
Mesajlar 500
Beğeniler 211 / 210
Ticaret 11, (%100)

transform ile estetik katabilirsiniz.
http://www.w3schools.com/cssref/css3_pr_transform.asp

27.02.2016 18:14

#9

rootyetkiliadam WM Aracı Kimlik Onayı

Üyelik 16.09.2015
Yaş/Cinsiyet 32 / E
Meslek IT Staff, Jr. Sysadmin
Konum İstanbul Avrupa

Ad Soyad U** K**
Mesajlar 407
Beğeniler 1 / 104
Ticaret 0, (%0)

Rica ederim ;)

iyi forumlar...

1 kişi bu mesajı beğendi.

Mouse üzerine gelince kayan div nasıl yapılır?

Üye Girişi Yap