Question

我试图在鼠标悬停时对Element应用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规则。

因此，所有父母及其父母都会对鼠标悬停事件执行操作。

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

所以你的鼠标在事件上变得像：

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

和类似的＆＃34; mouseout＆＃34;也是，但这不是必要的。它只是删除父母不需要的不必要的事件处理。

检查一下。

PS。当我试图检查时，你的小提琴是空的。）

使用指令隐藏使用角度js将鼠标悬停在子节点上的父css规则

1 个答案: