Browse Source

Retain hove on display element even when not using :hover

sbkwgh 8 years ago
parent
commit
df791eaf4e
1 changed files with 11 additions and 1 deletions
  1. 11 1
      src/components/PostReply.vue

+ 11 - 1
src/components/PostReply.vue

@@ -10,7 +10,12 @@
 			<div class='post_reply__date'>{{post.createdAt | formatDate('date|time', ' - ')}}</div>
 			<div class='post_reply__content' v-html='post.content'></div>
 		</div>
-		<div class='post_reply__display'>
+		<div
+			class='post_reply__display'
+			:class="{
+				'post_reply__display--hover': show,
+			}"
+		>
 			<div class='post_reply__letter' :style='{"background-color": post.User.color}'>{{post.User.username[0]}}</div>
 			<div class='post_reply__username'>{{post.User.username}}</div>
 		</div>
@@ -105,6 +110,11 @@
 
 			cursor: pointer;
 			transition: background-color 0.2s;
+			transition-delay: 0.1s;
+
+			@at-root #{&}--hover {
+				background-color: $color__lightgray--primary;
+			}
 
 			&:hover {
 				background-color: $color__lightgray--primary;