Angularjs 使用指令隐藏悬停在angular js中的子项上的父css规则

我试图在鼠标上方的元素上应用css规则，但当我尝试悬停子元素时，父节点的css规则保持不变

选择子节点后，应取消选择父节点。请检查JSFIDLE

<div ng-app="demo_app">
    <div ng-controller="MainController">

      <div hover style="padding:20px;">
        Parent
        <div hover style="padding:20px;">
           Children: Sub Parent
           <div hover style="padding:20px;">
              Children: Sub Parent Sub Parent 
              <div hover style="padding:20px;">
                 Content
              </div>

           </div>
        </div>
    </div>
    </div>    
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js">

</script>

<script>
    var app = angular.module('demo_app',[]);

    app.controller('MainController', ['$scope', function($scope)
    {

    }]);

    app.directive('hover', function(){

      return {
        restrict: 'AE', 
        link: function($scope, element, iAttrs, controller) 
        {
            var add_button='<div class="hover_plus"><a href="#"><span class="glyphicon glyphicon-plus navplus"></span></a></div>'; 
            element.bind('mouseover',function()
            {

              element.css('outline','');
              console.log(element.parents().css('outline',''));
              element.css('outline','1px solid red');

            });

            element.bind('mouseout',function()
            {
              element.css('outline','1px solid red');
              element.css('outline','');
              element.find('.hover_plus').remove();
            });

        }
      };
    });
</script>

父母亲
子女：次父母
子项：子项父项子项父项
内容
var-app=angular.module（'demo_-app'，[]）；
app.controller（'MainController'，['$scope'，函数（$scope）
{
}]);
app.directive（'hover'，function（）{
返回{
限制：“AE”，
链接：功能（$scope，element，iAttrs，controller）
{
var add_按钮=“”；
bind（'mouseover'，function（）
{
css（'大纲'，''）；
log（element.parents（）.css（'outline'，''）；
css（'outline'，'1px实心红色'）；
});
元素绑定（'mouseout'，function（）
{
css（'outline'，'1px实心红色'）；
css（'大纲'，''）；
元素。查找（'.hover_plus'）。删除（）；
});
}
};
});

---

您可能希望停止事件以传播到父元素，父元素也具有相同的指令，因此具有相同的css规则

因此，所有父对象及其父对象都在鼠标悬停事件上执行其操作

因此，在绑定时，需要阻止事件传播

因此，将鼠标悬停在事件上会变成：

element.bind('mouseover',function(event){
event.stopPropagation();
//other stuff
});

同样的，也有“鼠标出”，但这不是必须的。这只是为了消除家长不必要的事件处理

这边走

另外，当我试图检查时，你的小提琴是空的：）