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

05-04-2017, 12:51:13

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:

<div class="ana-class-1">
	<div class="ic-class-1">
		<i class="hover-verilecek-icon"></i>
	</div>
</div>
<div class="ana-class-2">
	<div class="ic-class-1">
		<div class="gizlenen-class"></div>
	</div>
</div>

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.

05-04-2017, 13:41:27

#2

Seyfy

Kimlik doğrulama veya yönetimden onay bekliyor.

Merhaba istediğin şekilde tam olarak css yapamazsın . en azından benim bilgim doğrultusunda

<div class="ana-class-1">
	<div class="ic-class-1">
		<i class="hover-verilecek-icon">hover-verilecek-icon</i>
		<div class="gizlenen-class">gizlenen-class</div>
	</div>
</div>

<style>
	.gizlenen-class {display: none;}
	
	i.hover-verilecek-icon:hover + .gizlenen-class  {display: inline-block!important;}
</style>

Ama jquery ile çözebilirsin :

<div class="ana-class-1">
	<div class="ic-class-1">
		<i class="hover-verilecek-icon">hover-verilecek-icon</i>
	</div>
</div>
<div class="ana-class-2">
	<div class="ic-class-1">
		<div class="gizlenen-class">gizlenen-class</div>
	</div>
</div>

<style>.gizlenen-class {display: none;}</style>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>

<script>
	$( ".hover-verilecek-icon" )
	.mouseenter(function() {
		$( ".gizlenen-class" ).css( "display","inline-block" );
	})
	.mouseleave(function() {
		$( ".gizlenen-class" ).hide();
	});
</script>

07-04-2017, 07:12:16

#3

SkyGhostAir

Seyfy adlı üyeden alıntı: mesajı görüntüle

Merhaba istediğin şekilde tam olarak css yapamazsın . en azından benim bilgim doğrultusunda

<div class="ana-class-1">
	<div class="ic-class-1">
		<i class="hover-verilecek-icon">hover-verilecek-icon</i>
		<div class="gizlenen-class">gizlenen-class</div>
	</div>
</div>

<style>
	.gizlenen-class {display: none;}
	
	i.hover-verilecek-icon:hover + .gizlenen-class  {display: inline-block!important;}
</style>

Ama jquery ile çözebilirsin :

<div class="ana-class-1">
	<div class="ic-class-1">
		<i class="hover-verilecek-icon">hover-verilecek-icon</i>
	</div>
</div>
<div class="ana-class-2">
	<div class="ic-class-1">
		<div class="gizlenen-class">gizlenen-class</div>
	</div>
</div>

<style>.gizlenen-class {display: none;}</style>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>

<script>
	$( ".hover-verilecek-icon" )
	.mouseenter(function() {
		$( ".gizlenen-class" ).css( "display","inline-block" );
	})
	.mouseleave(function() {
		$( ".gizlenen-class" ).hide();
	});
</script>

Öncelikle cevap için teşekkürler. Evet kod görevini yerine getiriyor ancak şöyle bir durum var."<style>.gizlenen-class {display: none;}</style>" şeklinde eklenen varsayılan display değerinin çalışması için "none!important" olması gerekiyor.(temada display: inline-block; değeri var ve üstte kalıyor) "none!important" yaptığımda ise jquery kodundaki "display","inline-block" alanını "display","inline-block!important" olarak değiştirmek gerekiyor. Bunu yaptığımda ise sanırım !important'ın eklenmesi jquery'de desteklenmediği için olsa gerek kod çalışmaz hale geliyor ya da farklı bir şekilde eklemek gerekir?

07-04-2017, 07:33:02

#4

~~jooker~~

Üyeliği durduruldu

SkyGhostAir adlı üyeden alıntı: mesajı görüntüle

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

        $('.xDiv').hover(
          function() {
            $(".yDiv").fadeIn(-1000);
          },
          function() {
            $(".yDiv").fadeOut(-1000);
          }
        );

07-04-2017, 17:01:02

#5

DWather

SkyGhostAir adlı üyeden alıntı: mesajı görüntüle

Öncelikle cevap için teşekkürler. Evet kod görevini yerine getiriyor ancak şöyle bir durum var."<style>.gizlenen-class {display: none;}</style>" şeklinde eklenen varsayılan display değerinin çalışması için "none!important" olması gerekiyor.(temada display: inline-block; değeri var ve üstte kalıyor) "none!important" yaptığımda ise jquery kodundaki "display","inline-block" alanını "display","inline-block!important" olarak değiştirmek gerekiyor. Bunu yaptığımda ise sanırım !important'ın eklenmesi jquery'de desteklenmediği için olsa gerek kod çalışmaz hale geliyor ya da farklı bir şekilde eklemek gerekir?

Display ile oynamasan da opacity ile gizleyip açsan sanırım istediğin şey oluyor.

07-04-2017, 21:41:44

#6

YedinciFirat

Kimlik doğrulama veya yönetimden onay bekliyor.

CSS için henüz öyle bir seçici mevcut değil lakin jquery ile çok basit bir şekilde bu işi halledebilirsin bunun için `toggleClass` kullananmalısın.

<html lang="en">
<head>
  <meta charset="UTF-8" />
</head>
<body>
  <div class="ana-class-1">
	<div class="ic-class-1">
		<i class="hover-verilecek-icon">icon...</i>
	</div>
</div>
<div class="ana-class-2">
	<div class="ic-class-1">
		<div class="gizlenen-class">gizlenen class..</div>
	</div>
</div>
</body>
</html>

.gizlenen-class {display: none;}
.goster{
  display:inline-block !important;
}

  $(".hover-verilecek-icon").hover(function(){
    $(".gizlenen-class").toggleClass("goster");
  });

Demo

09-04-2017, 02:38:18

#7

SkyGhostAir

DWather adlı üyeden alıntı: mesajı görüntüle

Display ile oynamasan da opacity ile gizleyip açsan sanırım istediğin şey oluyor.

oda olur ancak fiziksel olarak gizlenecek alan boş görüneceği için kullanışlı olmuyor. Bu yüzden display: none; kullanmak daha uygun.

YedinciFirat adlı üyeden alıntı: mesajı görüntüle

CSS için henüz öyle bir seçici mevcut değil lakin jquery ile çok basit bir şekilde bu işi halledebilirsin bunun için `toggleClass` kullananmalısın.

<html lang="en">
<head>
  <meta charset="UTF-8" />
</head>
<body>
  <div class="ana-class-1">
	<div class="ic-class-1">
		<i class="hover-verilecek-icon">icon...</i>
	</div>
</div>
<div class="ana-class-2">
	<div class="ic-class-1">
		<div class="gizlenen-class">gizlenen class..</div>
	</div>
</div>
</body>
</html>

.gizlenen-class {display: none;}
.goster{
  display:inline-block !important;
}

  $(".hover-verilecek-icon").hover(function(){
    $(".gizlenen-class").toggleClass("goster");
  });

Demo

Süpersiniz hocam, belirttiğiniz gibi yaptım sorun çözüldü. Teşekkürler.