Prévenir CSS :hover style de propagation de l'

Dans l'exemple suivant, quand je souris sur le bouton "X", l'élément de liste hover style sera activée ainsi, je ne veux pas que cela se produise.

Est-il possible d'avoir un hover de style sur le bouton indépendant de la hover de style sur le list-group-item? Quelque chose comme éviter le "hover" propagation?

Est-il un autre moyen d'y parvenir? Peut-être que l'assemblage de tous de ce de HTML/CSS/JS dans une manière différente?

Exemple de travail ici

<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();
  });

Mise à JOUR

Le problème semble être que lorsque le curseur de la intérieure X bouton de la souris ne fait pas quitter la "list-group-item" élément, ainsi, il maintient l'état de pointage.

J'ai été en mesure de le résoudre manuellement à l'envoi mouseenter et mouseleave sur "list-group-item" dans le mouseleave et mouseenter cas de la "remove-item' bouton, respectivement, sans la nécessité d'utiliser de l'événement.stopPropagation()' (sauf pour le bouton gestionnaire de clic).

L'inconvénient, c'est que j'ai besoin d'un mouseenter et un mouseleave gestionnaire d'événement pour les deux éléments. De préférence j'aimerais utiliser uniquement le CSS, mais qui semble être impossible.

Je ne suis pas sûr de savoir si c'est une solution propre, qu'en pensez-vous?

Exemple de travail ici

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();
  });

OriginalL'auteur zok | 2014-08-11