<div id="cursor"></div>
<div class="container-fluid">
  <div class="row">
    <ul class="list-group">
        <li class="list-group-item"><a href="#">An item</a></li>
        <li class="list-group-item"><a href="#">An item</a></li>
        <li class="list-group-item"><a href="#">An item</a></li>
        <li class="list-group-item"><a href="#">An item</a></li>
        <li class="list-group-item"><a href="#">An item</a></li>
    </ul>
  </div>
</div>

/* Эффект для курсора */
#cursor {
  background: #000;
  width: 17px;
  height: 17px;
  display: block;
    position: absolute;
  border-radius: 100px;
    pointer-events: none;
  z-index: 10000;
  transform: translate(-40%, -40%);
    transition: 0.05s ease-in-out;
}

#cursor.hovered {
  width: 50px;
  height: 50px;
  background: transparent;
  border: 1px solid #000;
  transition: 0.2s ease-in-out;
}

/* Это не вам не нужно */

.container-fluid {
  padding: 50px;
}

.list-group {
  width: 100%;
}

$(document).ready(function(){
var $moveable = $('#cursor');
$(document).mousemove(function(e){
  $moveable.css({
    'top': e.pageY,'left': e.pageX
  });
  
  $('a,button').hover(function() {
      $('#cursor').addClass("hovered");
    }, function(e) {
      $('#cursor').removeClass("hovered");
      }
  );
});
});