Zmiana CSS elementu podrzędnego po najechaniu kursorem na element nadrzędny

159

Po pierwsze, zakładam, że jest to zbyt skomplikowane dla CSS3, ale jeśli gdzieś jest jakieś rozwiązanie, wolałbym to zamiast tego.

HTML jest dość prosty.

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

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

Element podrzędny div jest ustawiony na wyświetlanie: none; domyślnie, ale potem zmienia się na wyświetlenie: blok; gdy wskaźnik myszy zostanie umieszczony nad nadrzędnym elementem DIV. Problem polega na tym, że ten znacznik pojawia się w kilku miejscach na mojej stronie i chcę, aby dziecko było wyświetlane tylko wtedy, gdy wskaźnik myszy jest nad jego rodzicem, a nie, gdy wskaźnik myszy jest nad którymkolwiek z pozostałych rodziców (wszyscy mają tę samą klasę imię i nazwisko bez identyfikatorów).

Próbowałem używać $(this)i .children()bezskutecznie.

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

— Hartley Brody
źródło

260

Dlaczego po prostu nie użyć CSS?

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

a następnie dodaj JS dla IE6 (na przykład wewnątrz warunkowego komentarza), który nie obsługuje: prawidłowo najedź kursorem:

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

Oto krótki przykład: Fiddle

— Stephen
źródło

ten kod nie działa dla mnie. czy ma mówić „.parent.hover”, a nie „.parent: hover” ?? przypadku, że nigdy wcześniej nie widziałem tego, co masz. i czy przecinek nie oznacza, że wiele selektorów przyjmuje te same style? nie widzę tutaj, jak to pomaga. trochę więcej informacji na temat CSS, por favor 0 =]

— Hartley Brody,

6

:hoverjest jedną z „dynamicznych pseudoklas” zdefiniowanych w CSS2 ( tutaj jest specyfikacja ). Oto krótki przykład: http://jsfiddle.net/5FLr4/ . mi to pasuje.

— Lee

ach, wielkie dzięki! w rzeczywistości miałem względne pozycjonowanie, które wypychało tekst dziecka z pola widzenia ... doh! >. <doceniam pomoc!

— Hartley Brody,

Najwyraźniej to nie zadziała dla .child :: - webkit-scrollbar-thumb, jeśli chcesz zmienić podświetlenie paska przewijania wewnątrz elementu podrzędnego.

— thdoan

1

.parent:not(:hover) .child { display: none; }wydaje mi się, że działa dobrze, chociaż z pewnością nie martwię się o IE6. Ale w ten sposób mogę go użyć na elementach, które nie chcą mieć jednolitej displaywłaściwości.

— Blair Connolly,

147

Nie ma potrzeby używania JavaScript ani jquery, CSS wystarczy:

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

ZOBACZ DEMO

— Ali Adravi
źródło

9

Użyj toggleClass().

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

gdzie colorjest klasa. Możesz stylizować klasę według własnego uznania, aby osiągnąć pożądane zachowanie. Przykład pokazuje, jak klasa jest dodawana i usuwana po wejściu i wyjściu myszą.

Sprawdź przykład pracy tutaj .

— Hussein
źródło

7

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

— Amir Rahman
źródło

3

Odpowiedź Stephena jest poprawna, ale oto moja adaptacja jego odpowiedzi:

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');
});

Możesz zobaczyć ten przykład pracujący w jsFiddle .

— Roger Roelofs
źródło

3

Mam to, co uważam za lepsze rozwiązanie, ponieważ jest skalowalne do większej liczby poziomów, tylu, ile potrzeba, a nie tylko do dwóch lub trzech.

Używam obramowań, ale można to również zrobić w dowolnym stylu, na przykład w kolorze tła.

W przypadku granicy chodzi o:

Miej inny kolor obramowania tylko jednego div, div nad miejscem, w którym znajduje się mysz, nie na żadnym rodzicu, ani na żadnym dziecku, więc można zobaczyć tylko takie obramowanie div w innym kolorze, podczas gdy reszta pozostaje na biało.

Możesz to przetestować pod adresem: http://jsbin.com/ubiyo3/13

A oto 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
źródło

To nie robi tego, co zadało pytanie. Zmienia obramowanie wokół elementu, nad którym znajduje się kursor. Nie obramowanie wokół elementu podrzędnego.

— jenniwren

2

Jeśli używasz stylu Twitter Bootstrap i podstawowego JS dla menu rozwijanego:

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

To jest brakujący element do tworzenia lepkich list rozwijanych (które nie są denerwujące)

Zachowanie polega na:
1. Pozostań otwarty po kliknięciu, zamknij po ponownym kliknięciu w dowolnym innym miejscu na stronie
2. Zamknij automatycznie, gdy myszka wychodzi z elementów menu.

— R Tobin
źródło

2

Nie jestem pewien, czy istnieją straszne powody, aby to zrobić, czy nie, ale wydaje się, że działa ze mną w najnowszej wersji przeglądarki Chrome / Firefox bez żadnych widocznych problemów z wydajnością z dużą ilością elementów na stronie.

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

Ale w ten sposób wszystko, czego potrzebujesz, to zastosować się parent-hover-showdo elementu, a reszta jest załatwiona, i możesz zachować dowolny domyślny typ wyświetlania, który nie jest zawsze „blokowany” lub tworząc wiele klas dla każdego typu.

— Brian Leishman
źródło

0

Aby zmienić to z css, nie musisz nawet ustawiać klasy podrzędnej

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

— hamboy75
źródło