diff --git a/app/assets/stylesheets/content/_work_packages_table.lsg b/app/assets/stylesheets/content/_work_packages_table.lsg
index 7866608c24..a0eb437f43 100644
--- a/app/assets/stylesheets/content/_work_packages_table.lsg
+++ b/app/assets/stylesheets/content/_work_packages_table.lsg
@@ -6,6 +6,13 @@
 <div class="work-packages-table--container">
   <div class="work-packages-table--results-container">
     <table class="workpackages-table">
+      <colgroup>
+        <col highlight-col>
+        <col highlight-col>
+        <col highlight-col>
+        <col highlight-col>
+        <col highlight-col>
+      </colgroup>
       <thead>
         <tr>
           <th>
diff --git a/frontend/app/assets/styleguide.jade b/frontend/app/assets/styleguide.jade
index 1f37e22eb3..1c584fc313 100644
--- a/frontend/app/assets/styleguide.jade
+++ b/frontend/app/assets/styleguide.jade
@@ -12,6 +12,20 @@ html(id="STYLEGUIDE_HTML_ID")
     script.
       angular.module('openproject-style-guide', ['ui.select', 'ngSanitize'])
 
+        // Add uiComponents to the styleguide.
+        // In order to be able to do that, we have to mock some
+        // services that directives in uiComponents rely on.
+      angular.module('openproject-style-guide')
+        .service('ActivityService', function() {} )
+        .service('ConfigurationService', function() {} )
+        .service('AutoCompleteHelper', function() {} )
+        .requires.push('openproject.uiComponents');
+
+    // get all of angular to be known
+    script(src='/assets/bundles/openproject-core-app.js')
+    // avoid errors of undefined jsToolBar
+    script(src='/assets/jstoolbar/jstoolbar.js')
+
   body.livingstyleguide(ng-app='openproject-style-guide', ng-strict-di=true)
 
     header.livingstyleguide--header
diff --git a/frontend/app/templates/work_packages/work_packages_table.html b/frontend/app/templates/work_packages/work_packages_table.html
index 7932592aea..f400080d11 100644
--- a/frontend/app/templates/work_packages/work_packages_table.html
+++ b/frontend/app/templates/work_packages/work_packages_table.html
@@ -3,10 +3,8 @@
   <div class="work-packages-table--results-container" ng-if="rows.length">
     <table class="workpackages-table keyboard-accessible-list">
       <colgroup>
-        <col />
-        <col ng-hide="hideWorkPackageDetails" />
-        <col />
-        <col ng-repeat="column in columns" />
+        <col highlight-col />
+        <col highlight-col ng-repeat="column in columns" />
       </colgroup>
       <thead>
         <tr>
diff --git a/frontend/app/ui_components/highlight-col-directive.js b/frontend/app/ui_components/highlight-col-directive.js
new file mode 100644
index 0000000000..9d1aa98945
--- /dev/null
+++ b/frontend/app/ui_components/highlight-col-directive.js
@@ -0,0 +1,41 @@
+//-- copyright
+// OpenProject is a project management system.
+// Copyright (C) 2012-2015 the OpenProject Foundation (OPF)
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License version 3.
+//
+// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+// Copyright (C) 2006-2013 Jean-Philippe Lang
+// Copyright (C) 2010-2013 the ChiliProject Team
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License
+// as published by the Free Software Foundation; either version 2
+// of the License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program; if not, write to the Free Software
+// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+//
+// See doc/COPYRIGHT.rdoc for more details.
+//++
+
+module.exports = function() {
+  return {
+    link: function(scope, element) {
+      var thead = element.parent('colgroup').siblings('thead');
+
+      thead.on('hover', 'th', function() {
+        if (element.index() === jQuery(this).index()) {
+          element.toggleClass('hover');
+        }
+      });
+    }
+  };
+};
diff --git a/frontend/app/ui_components/index.js b/frontend/app/ui_components/index.js
index 085a5b88fe..a78b1f901b 100644
--- a/frontend/app/ui_components/index.js
+++ b/frontend/app/ui_components/index.js
@@ -109,4 +109,5 @@ angular.module('openproject.uiComponents')
   .directive('uploadProgress', [require('./upload-progress-directive')])
   .directive('attachmentIcon', [require('./attachment-icon-directive')])
   .filter('ancestorsExpanded', require('./filters/ancestors-expanded-filter'))
-  .filter('latestItems', require('./filters/latest-items-filter'));
+  .filter('latestItems', require('./filters/latest-items-filter'))
+  .directive('highlightCol', [require('./highlight-col-directive')]);
diff --git a/frontend/app/work_packages/directives/work-packages-table-directive.js b/frontend/app/work_packages/directives/work-packages-table-directive.js
index 2ce572ce33..d5432bf31a 100644
--- a/frontend/app/work_packages/directives/work-packages-table-directive.js
+++ b/frontend/app/work_packages/directives/work-packages-table-directive.js
@@ -151,10 +151,6 @@ module.exports = function(I18n, WorkPackagesTableService, $window, $timeout, fla
         angular.element($window).trigger('resize');
       });
 
-      element.on('hover', 'th', function() {
-        element.find('col:eq('+ jQuery(this).index() +')').toggleClass('hover');
-      });
-
       scope.setCheckedStateForAllRows = function(state) {
         WorkPackagesTableService.setCheckedStateForAllRows(scope.rows, state);
       };