Arkadaşlar arşivimde yer alan UI elemanında bir adet kodu sizlerle paylaşmak ( ara sıra böyle şeyler paylaşmayı seviyorum , hem geçmişime de bakma fırsatım oluyor , duygulanıyorum :D :) )
istedim fakat arşivden direkt alıp sundum o zamanlar
ToggleClass vs. gibi kısa yollar kullanmaktansa böyle uzun bir kod yazmışım :D

Stay elemanına bir fix yazacaktım ama kafam almadı :D

$.UI = {

hoverChange : function(e,$stay,$class,$element){

/* Basit bir hover change fonksiyonu */

$classes = $class.split('->');
var $begin_class = $classes[0];
if($begin_class == "all"){

$remove_old_classes = true;

}else{
$remove_old_classes = false;
}
var $finish_class = $classes[1];
/* Child mi yoksa parentmi olduğunu buluyoruz. */
/* Değiştirilecek eleman dizilişi

child:element>>all
child:element>>first
parent:element>>first
parent:element>>all

*/
var $element = $element.split(':');
var $element_status = $element[0];
/* 2.bir sorgu ile first mi all mu onabakıyoruz.*/
var $element_query = $element[1];
var $element = $element_query.split('>>');
var $element_order = $element[1];
var $element_name = $element[0];
$(document).on({

mouseenter: function () {

/* Element seçiliyor . */
switch($element_status) {

case 'norelation': // ilişkisi yok ise;

/* Hepsi mi sadece ilki mi ? */
if($element_order == "all"){
$visual_element = $($element_name);
}else{
$visual_element = $($element_name+':first');
}

break;

case 'parent': // Büyüğü ise;

/* Hepsi mi sadece ilki mi ? */
if($element_order == "all"){
$visual_element = $(this).parents($element_name);
}else{
$visual_element = $(this).parent($element_name);
}
break;

case 'child': // Alt div ise ;

/* Hepsi mi sadece ilki mi ? */
if($element_order == "all"){
$visual_element = $(this).find($element_name);
}else{
$visual_element = $(this).find($element_name+':first');
}
break;


}

/* Ya hepsi yada belirlenen class lar silinir .*/
if($remove_old_classes == true){
$visual_element.addClass($finish_class);
}else{
$visual_element.removeClass($begin_class).addClass($finish_class);
}
},
mouseleave: function () {

/* Element seçiliyor . */
switch($element_status) {

case 'norelation': // ilişkisi yok ise;

/* Hepsi mi sadece ilki mi ? */
if($element_order == "all"){
$visual_element = $($element_name);
}else{
$visual_element = $($element_name+':first');
}

break;

case 'parent': // Büyüğü ise;

/* Hepsi mi sadece ilki mi ? */
if($element_order == "all"){
$visual_element = $(this).parents($element_name);
}else{
$visual_element = $(this).parent($element_name);
}
break;

case 'child': // Alt div ise ;

/* Hepsi mi sadece ilki mi ? */
if($element_order == "all"){
$visual_element = $(this).find($element_name);
}else{
$visual_element = $(this).find($element_name+':first');
}
break;


}

if($stay !==true){ /* Yapılan işlem geri döndürülsün mü ? */
if($remove_old_classes == true){
$visual_element.addClass($begin_class);
}else{
$visual_element.addClass($begin_class).removeClass($finish_class);
}
}
}
},e);
},
}

/* Kod yapısı itibari ile bir elemanın üstünde veyahut altıda bulunan bir elemana o elemanın üstüne gelinmesi halinde
bile olsa çeşitli işlemler yapabilirsiniz.

$.UI.hoverChange('.ustune_gelinen_eleman',kalsın_mı_?,'old_class->new_class','child:element>>first');

kalsın_mı_? -> True derseniz işlem üzerinden gidildiğinde kaldırılmaz.

old_class -> new_class bölümüne gireceğiniz old_class kaldırılacak eski sınıfı belirtir new_class ise eklenecek
olan yeni sınıfı belirtir.
Eğer old_class yerine all yazarsanız nesnenin üzerindeki tüm sınıfları kaldırır ve new_class ı yazar.

* old class yok ise boşluk bırakın ( ->new_class)

child:element>>first
Bu durumda child durumda olan element isimli divimizin sadece ilk olanına yapılacak işlem uygulanır.


HTML //



CSS //

.display_none {

display:none;


}
.display_none.hover {

display:block;

}

JQUERY

$.UI.HoverChange('.ust_eleman a',true,' ->hover','child:display_none:first');

Şeklinde yaparsak sadece bir kereliğine hoverChange elemanını üstüne geldiğmiz de içindeki display_none elemanın
görünür olacaktır.

*/


Kullanımını az da olsa anlatmaya çalıştım. :)
KOD içinde uzun karakterler var kısaltılabilir kısaltmak isteyenler için.

HTML5 İLE ZATEN YAPTIĞI BİRÇOK ŞEY YAPILIYOR AMA ÜST DİVLERE ETKİSİ BÜYÜK :d