Üst olmayan bir alana :hover verip class'da display:inline çalıştırmak mümkün mü?

05.04.2017 12:51

MuratDinc Miyavliyo - WiseKitten Kullanıcı

Üyelik 01.11.2012
Yaş/Cinsiyet 32 / E
Meslek Girişimci
Konum Balıkesir

Ad Soyad M** D**
Mesajlar 1583
Beğeniler 207 / 257
Ticaret 5, (%100)

Herkese selam,

Sitedeki sayfa görüntülenmesini display: none ile gizledim ancak sayfada bir icona :hover verip bu alanın display: inline-block!important alarak görünmesini sağlamak istiyorum.

CSS'de hiyerarşik bir yapı olduğu için gizlenen alanın sadece üstüne :hover verdiğimde bu konun çalışmasını sağlayabiliyorum. Ancak farklı bir kullanım ile üstü olmayan bir class'da bulunan icon'a :hover tanımlanabilir mi? Merak ediyorum.

Örnek bir şablon oluşturmak gerekir ise;
HTML:

CSS:

.gizlenen-class {display: none;}

i.hover-verilecek-icon:hover .gizlenen-class  {display: inline-block!important;}

Amaç: İcon'un üzerine gelindiğinde gizlenen alanın görünmesi.

Cevaplar için şimdiden teşekkürler.

👉 Türkiye'nin En Minnoş Kedi Bloğu Miyaliyo! 😻

05.04.2017 13:30

#2

Umur09 :/ Kullanıcı

Üyelik 31.05.2016
Yaş/Cinsiyet 29 / E
Meslek dev.
Konum İstanbul Anadolu

Ad Soyad U** A**
Mesajlar 131
Beğeniler 21 / 55
Ticaret 1, (%100)

CSS ile yapılır mı yapılamaz mı emin değilim, test etmeye de pek fazla vaktim yok ama jQuery ile kolaylıkla yapabilirsiniz.

$(document).ready(function(){

    $(".hover-verilecek-ikon").hover(function(){

        $(".gizlenen-class").css("display", "inline-block!important");

        }, function(){

        $(".gizlenen-class").css("display", "none");

    });

});

1 kişi bu mesajı beğendi.

05.04.2017 13:46

#3

creed74 WM Aracı Kullanıcı

Üyelik 30.06.2016
Yaş/Cinsiyet 50 / E
Meslek Yazılım
Konum İstanbul Anadolu

Ad Soyad Y** T**
Mesajlar 977
Beğeniler 33 / 388
Ticaret 45, (%100)

SkyGhostAir

Merhaba, head içine alttaki fonksiyonu yerleştirin..


<script>
	$(document).ready(function(){	
		$('#xdurum').on('change', function() {
		  $(".gizle").attr("style","display:none;");
		  if(this.value>0){		  
			$("#div"+this.value).attr("style","display:block;");
		  }
		})
	});
</script>

Html içeriğinizi şu şekilde düzenleyin..

Bir deneyip sonucu söylermisiniz..

1 kişi bu mesajı beğendi.

07.04.2017 06:57

#4

MuratDinc Miyavliyo - WiseKitten Kullanıcı

Üyelik 01.11.2012
Yaş/Cinsiyet 32 / E
Meslek Girişimci
Konum Balıkesir

Ad Soyad M** D**
Mesajlar 1583
Beğeniler 207 / 257
Ticaret 5, (%100)

Umur09 adlı üyeden alıntı

CSS ile yapılır mı yapılamaz mı emin değilim, test etmeye de pek fazla vaktim yok ama jQuery ile kolaylıkla yapabilirsiniz.

$(document).ready(function(){

    $(".hover-verilecek-ikon").hover(function(){

        $(".gizlenen-class").css("display", "inline-block!important");

        }, function(){

        $(".gizlenen-class").css("display", "none");

    });

});

Kodu ekledim, sanırım eksik bir şeyler var. Bu sadece hover vermek istediğim alana geldiğimde "display: none;" ekliyor. Yani görünen alanı yok ediyor ancak olmayan alanı göstermiyor.

"display: none;" veriyorsa css ile "display: none;" verip buna da "display: inline-block!important" vereyim dedim, ancak düzenleyince ya da alt üst edince kod çalışmaz oluyor. Anlam veremedim açıkçası.

creed74 adlı üyeden alıntı