Div Üzerine Gelindiğinde Görünen Div?

Başlık biraz ilginç oldu galiba. :D

Arkadaşlar sizlerden bir konuda yardım istiyorum. Kısaca açıklamaya çalışayım.

Şimdi benim iç içe divlerden oluşan bir kutucuğum var.

Örnek;

yukarıda belirttiğim şekilde bir kutu görünüyor bu kutunun içerisinde küçük bir resim var ve bu resmin altında ise rakam yazıyor yani puan. Benim istediğim şey bu kutunun üzerine gelindiğinde bir yine iç içe divlerden oluşan bir bilgi kutucuğu açılsın istiyorum.
Örnek üzerine gelindiğinde aşağıdaki div grubu görünür hale gelicek.

ben halihazırda sayfada bulunan "kutu-bilgi" divini visibility: hidden; komutu ile gizliyorum ve "kutu" divinin üzerine mouse ile gelindiğinde gizlemiş olduğum "kutu-bilgi" divi görünür hale gelsin istiyorum.

Css ile olmasını istemiyorum javascript olmasını istiyorum. Ayrıca HTML5 in bir özelliği olan "data-title" tagı varmış fakat bu tag aşağıdaki gibi yazıldığından içerisinde div çalıştırabilirmiyim bilmiyorum.

buranın

umarım anlata bilmişimdir. Ayrıca internette araştırdım buldum da fakat onlar hazır script şeklinde tasarlanmış ve içerisinde fazladan bir sürü javascript kodları var oysaki sanıyorum benim işimi 2 satırlık bir kod fazlasıyla görecektir.

Teşekkürler şimdiden.

Jquery ile yapmayı dene.

$(document).ready(function(){
$("#tiklanacakdividsi").click(function(event){
$('#gizlenecekdividsi').hide(1);
$('#gosterilecekdividsi').show(1);
});
});

Ayrıca jquery dosyasını sayfaya dahil etmeyi unutma.
<script></script>

aerdogan öncelikle çok teşekkürler ilgin için.


şimdi div e tıklamadan sadece üzerine gelindiğinde çalışması için .click yerine ne kullanabiliriz. Birde üzerine gelindiğinde görünecek div zaten visibility: hidden; css kodu ile gizlenmiş durumda sadece mause üstüne geldiğinde bu div görünür olacak. Yani biz bu divin visibility: hidden; özelliğini sildireceğiz. Mümkün mü verdiğin kod ile?

Ek Olarak:

Bakın bir örnek buldum mesela istediğim buna benzer birşey.

http://www.filmgoo.com/ bu sitedekine benzer bir şey olacak.

Dediğin siteyi inceleme fırsatım olmadı ama. Click yerine hover olacak. hide ve show yerinede toggle kullanabilirsin. Toggle, hide ve show'un yaptıkları tek başına yapar.

$(document).ready(function(){
$("#tiklanacakdividsi").hover(function(event){
$('#gizlenecekdividsi').toggle(1);
});
});

şu şekilde çözdüm hocam kurcalaya kurcalaya. Teşekkürler yardımlarınız için.
$(document).ready(function(){
$(".resim").hover(function(){
$(".bilgi").css("visibility", "visible");
});
$(".resim").mouseleave(function(){
$(".bilgi").css("visibility", "hidden");
});
});

Jquery ile sayfanı yorma. Bu linke bak:

https://webdesignerhut.com/examples/pure-css-tooltips/

Sadece CSS ile yapabilirsin istediğini.

PHPacemisi Teşekkürler fakat verdiğiniz örnekte div ekleyemiyoruz. Konuda belirtmiştim zaten data özelliği ile olmadığını:(
Yukarıdaki javascript kodu ile hallettim. :)

Hmm data olayına dikkat etmedim. O zaman standart css tooltip iş görür.

http://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip

http://www.w3schools.com/css/css_tooltip.asp

Burada istediğini yerleştirebilirsin içine. Sorun olmaz. Neden CSS? Şimdi bugün tooltip yapmaya çalışıyorsun, yarın sekme eklemek isteyeceksin ayrı bi js, o için bu için birçok js ile dolacak site. Bu yüzden kaçınmakta fayda var.