css - 在ng-include中触发CSS时如何更改ng-view的CSS

Question

我使用 ng-include 将左侧的垂直导航栏包含在页面中.我的导航栏在悬停时展开。每页都包裹在 <div class="wrapper"> 中.

我试图在导航栏在悬停时向右插入时更改每个包装器的边距，以便当用户将鼠标悬停在导航栏上时，它不会溢出到页面文本中。但是，我的 CSS 不适用于 Angular ，因为标题位于 ng-include 中。页面在 ng-view 中.

我怎样才能让它工作？

这是我的css:

.wrapper {
    margin-left: 12em;
}

nav:hover .wrapper {
    margin-left: 25em;
    transition: all 0.5s;
}

这是问题的一个问题:http://embed.plnkr.co/R1G1AFTMQjEhdaqB66U3/如您所见，TEST 文本没有移动。

Answer 1

问题是您的 CSS 试图定位存在于 nav:hover 中的 .wrapper div，这不是您设置 HTML 的方式。通过简单的 HTML 更改和 CSS 中的一个附加类，您可以非常接近您想要的内容:

首先在你的 include 上添加一个类，这样我们就可以在它悬停时捕获它并定位它后面的节点:

 <div class="menu-holder" ng-include='"header.html"'></div>

然后，代替这个:

 nav:hover .wrapper {
     margin-left: 25em;
     transition: all 0.5s;
 }

使用这个

 /*Add animation to the div that follows the menu holder*/
 .menu-holder + div {
   transition: all 0.5s;  
 }
 /*target the div that follows the .menu-holder div and apply this when hovering */
 .menu-holder:hover + div {
   margin-left:25em;
 }

参见 http://embed.plnkr.co/dW64avra2sh299z3e7wc/