Question

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

我正在尝试更改每个包装器的边距，因为导航栏在悬停时向右推，这样当用户将鼠标悬停在导航栏上时，它不会溢出到页面文本中。但是，我的CSS无法使用角度，因为标题位于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中存在的.wrapper div：hover，这不是你设置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/

如何在ng-include

1 个答案: