Question

<ul class="list-group" *ngFor="let item of items; index as i">
<li class="list-group-item"
(mouseenter)="mouseEnter()"
(mouseleave)="mouseLeave()"
(click)="onItemClick($event)">{{ item.expire }}
<span *ngIf="toggle">
    <label (click)="onDelItem()"><i class="fa fa-remove"></i></label> 
</span></li>

我有一个项目列表，并且我希望显示器将鼠标删除图标删除默认情况下，输入li（{current li）个项目将隐藏删除图标。

谢谢

Answer 1

您只能使用CSS来完成此操作（如果鼠标位于项目上，则显示删除图标）

<ul class="list-group" *ngFor="let item of items; index as i">
   <li class="list-group-item"
       (mouseenter)="mouseEnter()"
       (mouseleave)="mouseLeave()"
       (click)="onItemClick($event)">{{ item.expire }} 
       <label class="delete-icon" (click)="onDelItem()">
             <i class="fa fa-remove"></i>
       </label> 
   </li>
</ul>

在CSS中：

.delete-icon {
   display: none;
}


.list-group-item:hover .delete-icon {
   display: block !important;
}

Answer 2

尝试关注

我是第一次尝试Angular JS，所以请尽量不要打广告，并让我知道它是否有效

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.count = 0;
    $scope.mouseenter=function($event)
    {
       var SpanEle=angular.element('<span class="CrossSpan")"><i class="fa fa-remove" style="color:red"></i></span>');
    	$event.target.append(SpanEle[0]);
    }
    $scope.mouseleave=function($leave)
    {
       angular.element(document.querySelector('.CrossSpan')).remove();
    }
    $scope.SpanClick=function()
    {
    debugger;
       alert('click');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-mouseenter="mouseenter($event)" ng-mouseleave="mouseleave($leave)">First</li>
<li ng-mouseenter="mouseenter($event)" ng-mouseleave="mouseleave($leave)">Second</li>
<li ng-mouseenter="mouseenter($event)" ng-mouseleave="mouseleave($leave)">Third</li>
<li ng-mouseenter="mouseenter($event)" ng-mouseleave="mouseleave($leave)">Fourth</li>
<li ng-mouseenter="mouseenter($event)" ng-mouseleave="mouseleave($leave)">Fifth</li>
<li ng-mouseenter="mouseenter($event)" ng-mouseleave="mouseleave($leave)">Sixth</li>
</ul>
</div>

Answer 3

最简单的方法之一：-尝试

    <ul class="list-group" *ngFor="let item of items; index as i">
    <li class="list-group-item"
    (mouseenter)="item.toggle = true"
    (mouseleave)="item.toggle = false"
    (click)="onItemClick($event)">{{ item.expire }}
    <span *ngIf="item.toggle">
      <label (click)="onDelItem()"><i class="fa fa-remove"></i></label> 
    </span>
   </li>
   </ul>

Answer 4

尝试使用jquery

您可以看到“鼠标悬停时可以交叉点击并可以执行操作”

//For showing Cross on Hover
$("li").hover(function(){
        $(this).append('<span class="CrossSpan"><i class="fa fa-remove"></i></span>');
        }, function(){
        $(".CrossSpan").remove();
    });
    //For Click Event
    $("li").click(function(){
       alert('Cross Clicked');
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Forth</li>
<li>Fifth</li>
<li>Sixth</li>
</ul>

Answer 5

您应将CSS用于此类要求。处理事件可能会变得混乱。

以下是悬停显示的元素的示例：

li > span {
  display: none;
}

li:hover > span {
  display: block;
}

<li class='myCustomLI'>
  <label class='myCustomLI-label'>Dummy Label</label>
  <span class='myCustomLI-deleteIcon'>Test</span>
</li>

<li class='myCustomLI'>
  <label class='myCustomLI-label'>Dummy Label</label>
  <span class='myCustomLI-deleteIcon'>Test</span>
</li>

<li class='myCustomLI'>
  <label class='myCustomLI-label'>Dummy Label</label>
  <span class='myCustomLI-deleteIcon'>Test</span>
</li>

注意：我知道原始问题是基于Angular JS的，但是该要求不依赖于Angular，而可以仅使用CSS来实现。这就是以上答案所描绘的。如果有任何不正确/不适当的地方，请与您的投票一起评论。无声投票不会帮助任何人。

在mouseenter目标上将单个项目

5 个答案: