На указатель мыши выберите один элемент

<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>

У меня есть список элементов, и я хочу, чтобы дисплей удалял значок для элементов Mouse Enter li (current li) по умолчанию, этот значок удаления будет скрыт.

Спасибо

вы хотите удалить значки по умолчанию?

TheParam 10.09.2018 09:01

Используйте css, чтобы легко заархивировать это

Shashikant Devani 10.09.2018 09:18
2
2
291
5
Перейти к ответу Данный вопрос помечен как решенный

Ответы 5

Вы можете сделать это только с помощью 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;
}

Обратите внимание на значок <> в редакторе. Вы можете создать исполняемый фрагмент.

Rajesh 10.09.2018 09:04

он содержит синтаксис Angular, может ли «работающий сниппет» с этим справиться?

Raed Khalaf 10.09.2018 09:05

Это может быть, но это будет излишним, поскольку вам придется пройти через создание контроллера и переменных.

Rajesh 10.09.2018 09:07

Вы должны использовать 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. Это то, что изображено выше. Если есть что-то неправильное / неприемлемое, прокомментируйте это вместе с вашим голосом. Тихое голосование никому не помогает.

Ваш ответ общий: а что, если он использует список в своем проекте более чем в одном месте? Это создаст ему проблемы

ahsan ayub 10.09.2018 09:10

Это простое изображение. Не решение для копирования и вставки. OP придется использовать более конкретные селекторы. Тем не менее, я обновлю свой фрагмент, если его беспорядок

Rajesh 10.09.2018 09:11

Это будет хорошо. Потому что это может создать для него еще одну проблему.

ahsan ayub 10.09.2018 09:13

Привет, Раджеш, я обновил вопрос. Я намерен отобразить «значок удаления» на элементе, на который указывает мышь. Теперь, если я наведу указатель мыши на любой элемент, рядом со всеми элементами отобразится «значок удаления».

Ahmed 10.09.2018 09:14

@Ahmed Поскольку вы указываете селектор как lil:hover >, будет затронут только элемент, на который наведен курсор. Я обновил ответ. Пожалуйста, проверьте.

Rajesh 10.09.2018 10:41

Попробуйте выполнить с помощью 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>

Спасибо, это то, чего я хочу достичь, но с Angular

Ahmed 10.09.2018 09:15

У вас есть тег JQuery, поэтому я дал ответ в JQuery

Som 10.09.2018 09:23

Попробуйте подписаться

Я впервые попробовал 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>
Ответ принят как подходящий

Один из самых простых способов: - Попробуйте это

    <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>

Другие вопросы по теме