title: Prevent CSS :hover style propagation
body: <p>In the following example, when I mouse over the 'X' button, the list-item <code>hover</code> style gets enabled as well, I do not want this to happen. </p>
  
  <p>Is it possible to have a <code>hover</code> style on the button independent of the <code>hover</code> style on the <code>list-group-item</code>? Something like prevent the 'hover' propagation?</p>
  
  <p>Is there any other way to achieve that? Maybe assembling all of this HTML/CSS/JS in a different way?</p>
  
  <p><a href="http://plnkr.co/edit/7QipwWDjaFRfWbPrhpRd?p=preview" rel="noreferrer">Working sample here</a></p>
  
  <pre><code>&lt;ul class="list-group"&gt;
    &lt;li class="list-group-item"&gt;
      Lalalalaiaia
                  &lt;button class="btn btn-default btn-xs pull-right remove-item"&gt;
        &lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt;
      &lt;/button&gt;
    &lt;/li&gt;
    &lt;li class="list-group-item"&gt;
      Panananannaeue 
                  &lt;button class="btn btn-default btn-xs pull-right remove-item"&gt;
        &lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt;
      &lt;/button&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.list-group-item:hover {
    background: #fafafa;
    cursor: pointer;
  }
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>  $('.list-group-item').on('click', function(){
      console.log('clicked item');
    });
  
    $('.remove-item').on('click', function(e){
      console.log('clicked remove-item btn');
      e.stopPropagation();
    });
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>The problem seems to be that when hovering the inner X button, the mouse actually doesn't leave the 'list-group-item' element, thus, it keeps the hover state.</p>
  
  <p>I was able to solve it by manually dispatching <code>mouseenter</code> and <code>mouseleave</code> on the 'list-group-item' in the <code>mouseleave</code> and <code>mouseenter</code> event of the 'remove-item' button, respectively, without the need to use 'event.stopPropagation()' (except for the button click handler). </p>
  
  <p>The drawback is that I need a <code>mouseenter</code> and a <code>mouseleave</code> event handler for both elements. Preferably I'd use only CSS, but that seems to be impossible.</p>
  
  <p>I'm just not sure whether this is a clean solution, what do you think?</p>
  
  <p><a href="http://plnkr.co/edit/2XC4wUPDlzYi4pViVs45?p=preview" rel="noreferrer">Working sample here</a></p>
  
  <p>CSS</p>
  
  <pre><code>.list-group-item.mouseover {
    background: #fafafa;
    cursor: pointer;
  }
  
  .list-group-item .remove-item.mouseover {
    background: #aaf;
    cursor: pointer;
  }
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>  // 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();
    });
  </code></pre>