Üst öğe vurgulandığında alt öğenin CSS'sini değiştirme

159

Her şeyden önce, bunun CSS3 için çok karmaşık olduğunu varsayıyorum, ancak orada bir yerde bir çözüm varsa, bunun yerine gitmek isterim.

HTML oldukça basittir.

<div class="parent">
    <div class="child">
        Text Block 1
    </div>
</div>

<div class="parent">
    <div class="child">
        Text Block 2
    </div>
</div>

Alt div görüntülenecek şekilde ayarlanmıştır: yok; varsayılan olarak görüntülenir, ancak display: block; fare ana div'in üzerine getirildiğinde. Sorun, bu işaretlemenin sitemdeki çeşitli yerlerde görünmesidir ve çocuğun yalnızca farenin üstündeyse görüntülenmesini istiyorum, fare diğer ebeveynlerin herhangi birinin üzerindeyse (hepsi aynı sınıfa sahipse) adı ve kimliği yok).

Kullanmayı denedim $(this)ve .children()boşuna.

$('.parent').hover(function(){
            $(this).children('.child').css("display","block");
        }, function() {
            $(this).children('.child').css("display","none");
        });

— Hartley Brody
kaynak

260

Neden sadece CSS kullanmıyorsunuz?

.parent:hover .child, .parent.hover .child { display: block; }

ve ardından IE6 için JS'yi ekleyin (örneğin, koşullu bir yorumun içine) ve aşağıdakileri desteklemez:

jQuery('.parent').hover(function () {
    jQuery(this).addClass('hover');
}, function () {
    jQuery(this).removeClass('hover');
});

İşte kısa bir örnek: Fiddle

— Stephen
kaynak

bu kod benim için çalışmıyor. ".parent: hover" değil ".parent.hover" demesi gerekiyor mu ?? daha önce ne olduğunu hiç görmedim. ve virgül aynı stilleri alan birden fazla seçiciyi göstermiyor mu? burada nasıl yardımcı olduğunu görmüyorum. bu CSS hakkında biraz daha fazla bilgi, por favor 0 =]

— Hartley Brody

6

:hoverCSS2 tarafından tanımlanan "Dinamik sözde sınıflardan" biridir ( işte spesifikasyon ). Kısa bir örnek: http://jsfiddle.net/5FLr4/ . benim için çalışıyor.

— Lee

ahh çok teşekkürler! Aslında çocuk metni görünmez iterek bazı göreceli konumlandırma vardı ... doh! Yardımı takdir ediyorum!

— Hartley Brody

Alt öğe içindeki kaydırma çubuğunun vurgulamasını değiştirmek istiyorsanız, bu .child :: - webkit-scrollbar-thumb için işe yaramaz.

— thdoan

1

.parent:not(:hover) .child { display: none; }IE6 için kesinlikle endişelenmeme rağmen, benim için iyi çalışıyor gibi görünüyor. Ancak bu şekilde, muntazam bir displaymülke sahip olmak istemediğim unsurlarda kullanabilirim .

— Blair Connolly

147

JavaScript veya jquery kullanmaya gerek yoktur, CSS yeterlidir:

.child{ display:none; }
.parent:hover .child{ display:block; }

DEMO'YU GÖR

— Ali Adravi
kaynak

9

Kullanın toggleClass().

$('.parent').hover(function(){
$(this).find('.child').toggleClass('color')
});

colorsınıf nerede . İstediğiniz davranışı elde etmek için sınıfı istediğiniz gibi biçimlendirebilirsiniz. Örnek, sınıfın fare giriş ve çıkışında nasıl eklendiğini ve kaldırıldığını gösterir.

Çalışma örneğini buradan kontrol edin .

— Hüseyin
kaynak

7

.parent:hover > .child {
    /*do anything with this child*/
}

— Amir Rahman
kaynak

3

Stephen'ın cevabı doğru ama işte onun cevabına adaptasyon:

HTML

<div class="parent">
    <p> parent 1 </p>
    <div class="child">
        Text Block 1
    </div>
</div>

<div class="parent">
    <p> parent 2 </p>
    <div class="child">
        Text Block 2
    </div>
</div>

CSS

.parent { width: 100px; min-height: 100px; color: red; }
.child { width: 50px; min-height: 20px; color: blue; display: none; }
.parent:hover .child, .parent.hover .child { display: block; }

jQuery

//this is only necessary for IE and should be in a conditional comment

jQuery('.parent').hover(function () {
    jQuery(this).addClass('hover');
}, function () {
    jQuery(this).removeClass('hover');
});

Bu örneği jsFiddle üzerinde çalışırken görebilirsiniz .

— Roger Roelofs
kaynak

3

Daha iyi bir çözüm olduğunu düşündüğüm şey var, çünkü sadece iki veya üç değil, istendiği kadar çok seviyeye ölçeklenebilir.

Kenarlıkları kullanıyorum, ama aynı zamanda arka plan rengi gibi istenen whateever tarzı ile de yapılabilir.

Sınır ile fikir şu şekildedir:

Farklı bir kenarlık rengine sahip sadece bir div var, farenin üzerinde bulunduğu div, herhangi bir ebeveyn üzerinde değil, herhangi bir çocukta değil, bu nedenle geri kalan beyaz kalırken farklı bir renkte sadece böyle bir div kenarlığı görülebilir.

Test edebilirsiniz: http://jsbin.com/ubiyo3/13

Ve işte kod:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Hierarchie Borders MarkUp</title>
<style>

  .parent { display: block; position: relative; z-index: 0;
            height: auto; width: auto; padding: 25px;
          }

  .parent-bg { display: block; height: 100%; width: 100%; 
               position: absolute; top: 0px; left: 0px; 
               border: 1px solid white; z-index: 0; 
             }
  .parent-bg:hover { border: 1px solid red; }

  .child { display: block; position: relative; z-index: 1; 
           height: auto; width: auto; padding: 25px;
         }

  .child-bg { display: block; height: 100%; width: 100%; 
              position: absolute; top: 0px; left: 0px; 
              border: 1px solid white; z-index: 0; 
            }
  .child-bg:hover { border: 1px solid red; }

  .grandson { display: block; position: relative; z-index: 2; 
              height: auto; width: auto; padding: 25px;
            }

  .grandson-bg { display: block; height: 100%; width: 100%; 
                 position: absolute; top: 0px; left: 0px; 
                 border: 1px solid white; z-index: 0; 
               }
  .grandson-bg:hover { border: 1px solid red; }

</style>
</head>
<body>
  <div class="parent">
    Parent
    <div class="child">
      Child
      <div class="grandson">
        Grandson
        <div class="grandson-bg"></div>
      </div>
      <div class="child-bg"></div>
    </div>
    <div class="parent-bg"></div>
  </div>
</body>
</html>

— z666zz666z
kaynak

Bu sorunun sorduğu şeyi yapmaz. Üzerine gelinen öğenin etrafındaki kenarlığı değiştirir. Bir alt öğenin etrafındaki kenarlık değil.

— jenniwren

2

Bir açılır menü için Twitter Bootstrap stilini ve temel JS'yi kullanıyorsanız :

.child{ display:none; }
.parent:hover .child{ display:block; }

Yapışkan açılır menüler oluşturmanın eksik parçası (bu sinir bozucu değil)

Davranış:
1. Tıklandığında açık kalın, sayfanın başka bir yerine tekrar tıkladığınızda kapatın
2. Fare menü öğelerinden dışarı çıktığında otomatik olarak kapanır.

— R Tobin
kaynak

2

Bunu yapmak için korkunç nedenler olup olmadığından emin değilim, ancak sayfadaki çok fazla öğe ile görünür performans sorunları olmadan Chrome / Firefox'un en son sürümünde benimle çalışıyor gibi görünüyor.

*:not(:hover)>.parent-hover-show{
    display:none;
}

Ancak bu şekilde ihtiyacınız olan tek parent-hover-showşey bir öğeye uygulamaktır ve geri kalanı halledilir ve istediğiniz her varsayılan görüntüleme türünü her zaman "blok" veya her tür için birden fazla sınıf yapmadan saklayabilirsiniz.

— Brian Leishman
kaynak

0

Css'den değiştirmek için çocuk sınıfını ayarlamanız bile gerekmez

.parent > div:nth-child(1) { display:none; }
.parent:hover > div:nth-child(1) { display: block; }

— hamboy75
kaynak