使用指令在角度js上懸停在兒童上的父css規則

Question

我嘗試在mouseover上對元素應用css規則，但是當我嘗試懸停子元素時，父節點的css規則仍保留在圓括號中。

當選擇子節點時，應取消選擇父節點。請檢查的jsfiddle

<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> 

https://jsfiddle.net/john_bahar/6yztpn6b/1/

Answer 1

你可能想阻止事件傳播到父元素，它也具有相同的指令，因此相同的CSS規則。

因此，所有家長及其家長，他們都在mouseover事件上執行他們的操作。

因此，綁定時，您需要停止傳播事件。

所以你的鼠標事件變得像：

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

，類似「鼠標移開」還可以，但不是必需的。這只是刪除不需要的父項的不必要的事件處理。

檢查這種方式。

PS。你的小提琴是空的，當我試圖檢查:)