懸停事件第一次調用鼠標時停止鼠標輸入事件。

Question

我有一個用戶可以通過javascript添加到項目的列表。我想要的是當用戶將鼠標放在列表項上時，可以看到圖形。現在它可以工作，但只有在用戶將鼠標移出列表項之後才能工作。一旦他們將鼠標移回列表項目上，它就會開始工作。

的Jquery：

//When the user hovers over a list item give them the option to delete it 
$('.list-item-container').hover(function(){ 
    $('.list-item').on({ 
     mouseover: function(){ 
      $('.glyphicon-remove', this).css('visibility', 'visible'); 

      //When the user click to remove the list item remove it from the list 
      $('.glyphicon-remove').on('click', function(){ 
       //TODO: Popup modal for delete confirmation 
       $(this).parent().remove(); 
      }); 
     }, 
     mouseout: function(){ 
      $('.glyphicon-remove', this).css('visibility', 'hidden'); 
     } 
    }); 
}); 

HTML：

<div class="list-item-wrapper"> 
    <ul class="list-item-container"> 
     <li class="row list-item"> 
      <input type="checkbox" class="item-done"> 
      <label for="list-done">My to-do-list</label> 

      <span class="glyphicon glyphicon-remove pull-right"></span> 
     </li> 
    </ul> 
</div> 

Answer 1

你的jQuery代碼將鼠標懸停事件（每次過 - 不是很大）， - 所以你的代碼是不是做你打算這樣做。

這對CSS來說更容易。

.glyphicon-remove { 
    visibility: hidden; 
} 


.list-item-container:hover .glyphicon-remove { 
    visibility: visible; 
} 

然後，唯一需要的JavaScript是刪除元素。

$('.list-item-container').on('click', '.glyphicon-remove', function() { 
    $(this).parent().remove(); 
});