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

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键被按下，您需要通过该函数传递$event。然后，在鼠标离开时，您需要 ng-mouseleave 指令来检测这一点并调用另一个函数来再次隐藏它。

现在回答你的问题，如果你希望跨度最初隐藏，那么只需将类 hidden 添加到 span 即可。

我添加了以下 CSS 类，使容器不会变得很小，以便于轻松悬停。

.portlet-titlebar {
  border: 1px solid black;
  min-height: 50px;
}

这是一个工作演示，如果有任何问题请告诉我，我们可以解决。

<小时/>

JSFiddle Demo