<!DOCTYPE html>
<html>

  <head>

    <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <ul class="list-group">
      <li class="list-group-item">
    	  <span class="name">Lalalalaiaia</span>
    		  <button class="btn btn-default btn-xs pull-right remove-item">
          <span class="glyphicon glyphicon-remove"></span>
        </button>
      </li>
      <li class="list-group-item">
    	  <span class="name">Panananannaeue</span> 
    		  <button class="btn btn-default btn-xs pull-right remove-item">
          <span class="glyphicon glyphicon-remove"></span>
        </button>
      </li>
    </ul>
    
    <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script src="script.js"></script>

  </body>

</html>

$(function(){

  // 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();
  });
  
});
/* Styles go here */

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

/* .list-group-item .remove-item:hover {
  background: #aaf;
  cursor: pointer;
} */

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

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