Jak zmienić styl macierzysty przez dziecko: hover działania w mniej

Question

mam to mniej konfiguracji:

.wrapper { 
    .parent { 
     height: 100px; 

     .children { 
      //some style; 

      &:hover { 

       .parent & { 
       height: 150px; 
       } 
      } 
     } 
    } 
} 

muszę zmienić trochę wysokość dla elementu nadrzędnego przez najechaniu na jakimś dzieckiem w jej wnętrzu. Ten kod nie działa, więc czy można to zrobić? Dużo za pomoc.

Answer 1

Dodawanie :hover do .parent zamiast .children div będzie osiągnąć rezultat, http://codepen.io/duncanbeattie/pen/xvDdu

.wrapper { 
    .parent { 
     pointer-events:none; 
     height: 100px; 
     background:#000; 
     .children { 
      //some style; 
      height:20px; 
      background:#f00; 
      pointer-events:all; 
     } 
     &:hover { 
      height:150px; 
     } 
    } 
} 

Answer 2

Głównym problemem jest to, że niestety nie możesz styl rodzica w jakikolwiek sposób z punktu widzenia selektor dziecka (z lub bez :hover) w CSS. Zobacz ten answer here.

Można tylko stylizować dzieci według selektorów lub rodzeństwa rodziców według selektorów każdego z nich.

Powiedział, że istnieją oczywiście proste sposoby, aby to osiągnąć z javascript/jQuery,

ale nie mniej, jak jego produkcja jest CSS, więc powyższe ograniczenia zastosować ponownie.

Ale na szczęście niektóre właściwości dzieci wpływają na niektóre właściwości ich rodziców ... więc przez stylizowanie dzieci, wpłynie to również na rodzica. Jeśli dziecko (blok) znajduje się względnie wewnątrz rodzica (bloku), rodzice powinni się dostosować do height (włączając w to padding, margin i , margin i , margin i, aby uzyskać dziecko, bez konieczności wykonywania naprawdę szczególnych czynności dla rodzica.

DEMO

.parent { 
 
    width:200px; 
 
    background:orange; 
 
} 
 
.child { 
 
    background:red; 
 
    width:100px; 
 
    height:100px; 
 
} 
 
.child:hover { 
 
    height:200px; 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
</div>

Answer 3

Dodać CSS tak:

.parent.over { 
    /* whatever style you want when teh child is hovered over */ 
} 

Korzystanie jQuery:

$(".children").hover(
    function() { 
     $(this).closest(".parent").removeClass("over").addClass("over"); 
    }, function() { 
     $(this).closest(".parent").removeClass("over"); 
    } 
);