Question

我已经在角度2中创建了一个滤镜组件，我在表格标题中添加了该组件。我希望显示当鼠标在跨度上时以及何时我想要隐藏

<th>
 <span class="headColor" >{{componentContents.dlHead}}</span>
  <app-data-filter [dataObject]="responseData" [filterBy]="'storeCatelogue'"
 (filteredArray)="filterByArray($event,'storeCatelogue')"></app-data-filter>
</th>
 <th >
  <span class="headColor">{{componentContents.titleHead}}</span>
  <app-data-filter [dataObject]="responseData" [filterBy]="'title'" 
  (filteredArray)="filterByArray($event,'title')" ></app-data-filter>
 </th>

但我想在鼠标悬停时显示此过滤器组件并隐藏鼠标，这不应显示我想为该特定标头显示的所有app-data-filter组件。每个标题的过滤器不同，所以我应该一次显示一个。我不知道主持人听说我怎么能在这里使用它，因为我还在学习角度2所以如果我得到一些指导或者有其他任何方式它会非常有用

Answer 1

您可以使用css：hover选择器..

由于您没有指定html的确切结构，因此我很难说出您应该如何实现它。

让我们说这个问题，你想要显示桌上鼠标悬停，你的表类是＆＃39; my-table＆＃39;。

.my-table:hover{
  th{
    display:none;
    }
}

您可以阅读：hover selector here。

修改

如果你的html strauctre是这样的：

<span class='my-toggle-span'>Toggle app filter!</span> <app-filter class='my-app-filter'></app-filter>

然后你的css将是

.my-toggle-span:hover +.my-app-filter{ display:none; }

plus selector选择紧随其后的所有元素。

编辑2： 作为开启者要求，一个基于JavaScript的解决方案：我不建议采用这种方法，您的切换逻辑应该在您的组件中处理，而不是在您的html中处理。

<span class='my-toggle-span' (mouseenter)="toggle=true;" (mouseleave)="toggle=false;">Toggle app filter!</span> <app-filter *ngIf="toggle" class='my-app-filter'></app-filter>

angular 2显示和隐藏鼠标进入和离开的组件

1 个答案: