Question

此代码仅将.current类应用于我的范围，但首先不隐藏范围。我希望它被隐藏，然后在hover + ctrl - 显示，并在mouseleave - 再次隐藏。我怎样才能做到这一点？

HTML：

<div class="portlet-titlebar" ng-mouseover="hoverIn()">    
    <span class="remove" class="hidden">
          <clr-icon shape="times-circle" class="is-warning" size="16"></clr-icon>
    </span>
</div>

指令：

scope.hoverIn = function(){
    var res = document.getElementsByClassName('remove');
    var result = angular.element(res);
    if(event.ctrlKey){
      result.removeClass('hidden');
      result.addClass('current');
   }
}

少：

  .hidden{
    display:none;
  }

  .current{
    display: block;
    border: 1px solid red;
  }

Answer 1

基于这个问题，这是我的解决方案，在悬停ng-mouseover($event)将跟踪悬停时，然后if条件将检查是否按下了ctrl键，你需要传递{{1通过该函数。然后在鼠标离开时你需要$event指令来检测这个并调用另一个函数来再次隐藏它。

现在回答您的问题，如果您希望隐藏跨度，那么最初只需将ng-mouseleave添加到hidden。

我添加了下面的CSS类，以便容器不会变得非常小，以方便轻松悬停。

span

这是一个有效的演示，让我知道如果有任何问题，我们可以解决它。

JSFiddle Demo

AngularJS / CSS - 在鼠标悬停时显示/隐藏元素

1 个答案: