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

时间:2017-10-02 06:44:03

标签: javascript css angularjs

此代码仅将.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;
  }

1 个答案:

答案 0 :(得分:0)

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

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

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

span

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

JSFiddle Demo