防止 CSS :hover 样式传播

Question

新手上路，请多包涵

在下面的示例中，当我将鼠标悬停在“X”按钮上时，列表项 hover 样式也被启用，我不希望这种情况发生。

按钮上的 hover 样式是否可以独立于 hover list-group-item 样式？诸如防止“悬停”传播之类的东西？

还有其他方法可以实现吗？也许以不同的方式组装所有这些 HTML/CSS/JS？

<ul class="list-group">
  <li class="list-group-item">
    Lalalalaiaia
                <button class="btn btn-default btn-xs pull-right remove-item">
      <span class="glyphicon glyphicon-remove"></span>
    </button>
  </li>
  <li class="list-group-item">
    Panananannaeue
                <button class="btn btn-default btn-xs pull-right remove-item">
      <span class="glyphicon glyphicon-remove"></span>
    </button>
  </li>
</ul>

CSS

 .list-group-item:hover {
  background: #fafafa;
  cursor: pointer;
}

JavaScript

   $('.list-group-item').on('click', function(){
    console.log('clicked item');
  });

  $('.remove-item').on('click', function(e){
    console.log('clicked remove-item btn');
    e.stopPropagation();
  });

更新

问题似乎是当鼠标悬停在内部 X 按钮时，鼠标实际上并没有离开“list-group-item”元素，因此它保持悬停状态。

I was able to solve it by manually dispatching mouseenter and mouseleave on the ‘list-group-item’ in the mouseleave and mouseenter ‘remove-item’ 按钮的事件，而不需要使用 ‘event.stopPropagation()‘（按钮单击处理程序除外）。

缺点是我需要一个 mouseenter 和一个 mouseleave 这两个元素的事件处理程序。我最好只使用 CSS，但这似乎是不可能的。

我只是不确定这是否是一个干净的解决方案，您怎么看？

工作样本在这里

CSS

 .list-group-item.mouseover {
  background: #fafafa;
  cursor: pointer;
}

.list-group-item .remove-item.mouseover {
  background: #aaf;
  cursor: pointer;
}

JavaScript

   // LIST-ITEM EVENT HANDLERS

  $('.list-group-item').on('mouseenter', function(e){
    $(this).addClass('mouseover');
  }).on('mouseleave', function(e){
    $(this).removeClass('mouseover');
  });

  $('.list-group-item').on('click', function(){
    console.log('clicked item');
  });

  // LIST-ITEM REMOVE BUTTON EVENT HANDLERS

  $('.remove-item').on('mouseenter', function(e){
    $(this).addClass('mouseover');
    $(this).parent().mouseleave();
  }).on('mouseleave', function(e){
    $(this).removeClass('mouseover');
    $(this).parent().mouseenter();
  });

  $('.remove-item').on('click', function(e){
    console.log('clicked remove-item btn');
    e.stopPropagation();
  });