diff options
| author | Terry Truong <terry06890@gmail.com> | 2023-01-15 01:45:42 +1100 |
|---|---|---|
| committer | Terry Truong <terry06890@gmail.com> | 2023-01-15 01:45:42 +1100 |
| commit | 79c24b673c7d08f969ce5fb5954867a61456c5e7 (patch) | |
| tree | 47bf96ab2be552c43e7564900fb07406db05161a | |
| parent | e045f6461b5ceabb285b00fb9db0050a3d1f9d8d (diff) | |
Fade other events when hovering over onefade-others-on-hover
| -rw-r--r-- | src/components/TimeLine.vue | 5 |
1 files changed, 4 insertions, 1 deletions
diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue index c72fbff..f212a32 100644 --- a/src/components/TimeLine.vue +++ b/src/components/TimeLine.vue @@ -48,7 +48,9 @@ </template> </svg> <!-- Events --> - <div v-for="id in idToPos.keys()" :key="id" class="absolute animate-fadein z-20" :style="eventStyles(id)"> + <div v-for="id in idToPos.keys()" :key="id" class="absolute animate-fadein z-20" :style="eventStyles(id)" + @mouseenter="hoveredEventId = id" @mouseleave="hoveredEventId = null" + :class="{'brightness-50': hoveredEventId != null && hoveredEventId != id}"> <!-- Image --> <div class="rounded-full cursor-pointer hover:brightness-125" :style="eventImgStyles(id)" :title="idToEvent.get(id)!.title" @click="emit('info-click', idToEvent.get(id)!.title)"></div> @@ -1236,6 +1238,7 @@ const skipTransition = ref(true); onMounted(() => setTimeout(() => {skipTransition.value = false}, 100)); // Styles +const hoveredEventId = ref(null as null | number); const mainlineStyles = computed(() => { return { transform: props.vert ? |