Wie Eltern Stil von Kind ändern: schweben Aktion in weniger

Question

ich diese WENIGER Setup:

.wrapper { 
    .parent { 
     height: 100px; 

     .children { 
      //some style; 

      &:hover { 

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

ich für übergeordnetes Element von Hover auf einig Kind in der es eine gewissen Höhe zu ändern. Dieser Code funktioniert nicht, also ist es möglich, dies zu tun? Vielen Dank für die Hilfe.

Answer 1

Hinzufügen der :hover zum .parent anstelle des .children div das Ergebnis erzielen, 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

Das Hauptproblem dabei ist, dass leider können Sie nicht die Eltern in irgendeiner Weise aus der Perspektive eines Stils Kinderselektor (mit oder ohne :hover) in CSS. Siehe hierzu answer here.

Sie können Kinder nur nach den Selektoren oder den Geschwistern ihrer Eltern entsprechend den Selektoren des jeweils anderen Typs stylen.

Das heißt, es gibt natürlich einfache Möglichkeiten, dies mit Javascript/jQuery zu erreichen,

aber nicht weniger, als seine Ausgabe CSS ist, so dass die oben genannten Einschränkungen gelten wieder.

Aber zum Glück einige Eigenschaften von Kindern beeinflussen einige Eigenschaften ihrer Eltern ... so durch Styling Kinder, werden Sie auch die Eltern beeinflussen. Wenn das Kind (Block) relativ innerhalb eines Elternteils (Block) positioniert ist, sollten sich die Eltern height an das height (einschließlich padding, margin und border) des Kindes anpassen, ohne dass Sie etwas wirklich Besonderes für das Elternteil tun müssen.

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

Machen Sie Ihre CSS wie folgt aus:

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

Mit jQuery:

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