diff --git a/app/assets/javascripts/boards/components/board_card.js.es6 b/app/assets/javascripts/boards/components/board_card.js.es6
index e61943de5a927c712654f6a60cff329145548e17..17bcbc1d54f520694b3e2fa42823999b500844d7 100644
--- a/app/assets/javascripts/boards/components/board_card.js.es6
+++ b/app/assets/javascripts/boards/components/board_card.js.es6
@@ -12,6 +12,21 @@
       disabled: Boolean,
       index: Number
     },
+    data () {
+      return {
+        showDetail: false,
+        detailIssue: Store.detail
+      };
+    },
+    computed: {
+      issueDetailVisible () {
+        if (this.detailIssue.issue && this.detailIssue.issue.id === this.issue.id) {
+          return true;
+        } else {
+          return false;
+        }
+      }
+    },
     methods: {
       filterByLabel (label, e) {
         let labelToggleText = label.title;
@@ -38,8 +53,19 @@
 
         Store.updateFiltersUrl();
       },
+      mouseDown () {
+        this.showDetail = true;
+      },
+      mouseMove () {
+        if (this.showDetail) {
+          this.showDetail = false;
+        }
+      },
       showIssue () {
-        Store.detail.issue = this.issue;
+        if (this.showDetail) {
+          this.showDetail = false;
+          Vue.set(Store.detail, 'issue', this.issue);
+        }
       }
     }
   });
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 6eb2cb93baa180b305dc7e91f0febdc8c962a7ba..f57e9a37bc3825706a6331d3b061852763e49806 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -194,6 +194,10 @@ lex
     margin-bottom: 5px;
   }
 
+  &.is-active {
+    background-color: $row-hover;
+  }
+
   .label {
     border: 0;
     outline: 0;
diff --git a/app/views/projects/boards/components/_card.html.haml b/app/views/projects/boards/components/_card.html.haml
index 71f64d7827c291bdd9354fabd3a8b2d6bf4c08b6..d466165816f8e54ca25560137b80b2376490d6c5 100644
--- a/app/views/projects/boards/components/_card.html.haml
+++ b/app/views/projects/boards/components/_card.html.haml
@@ -7,9 +7,11 @@
   ":issue-link-base" => "issueLinkBase",
   ":disabled" => "disabled",
   "track-by" => "id" }
-  %li.card{ ":class" => "{ 'user-can-drag': !disabled && issue.id, 'is-disabled': disabled || !issue.id }",
+  %li.card{ ":class" => "{ 'user-can-drag': !disabled && issue.id, 'is-disabled': disabled || !issue.id, 'is-active': issueDetailVisible }",
     ":index" => "index",
-    "@click" => "showIssue" }
+    "@mousedown" => "mouseDown",
+    "@mouseMove" => "mouseMove",
+    "@mouseup" => "showIssue" }
     %h4.card-title
       = icon("eye-slash", class: "confidential-icon", "v-if" => "issue.confidential")
       %a{ ":href" => "issueLinkBase + '/' + issue.id",