Fix Homepage collage's active photo effect while hover

- Change method and use a class on collage itself fading all photos, then highlight the one being hovered
- For some reason the content inside was conflicting the mouseenter event
This commit is contained in:
2022-03-21 14:04:52 +01:00
parent 8c0e9145c6
commit 91510df410
4 changed files with 15 additions and 6 deletions

View File

@@ -21,14 +21,14 @@
</script>
<div class="photo-card"
class:is-inactive={hovered}
class:is-hovered={hovered}
on:mouseenter={() => sendHover(true)}
on:focus={() => sendHover(true)}
on:mouseout={() => sendHover(false)}
on:blur={() => sendHover(false)}
>
{#if url}
<a href={url}>
<a href={url} sveltekit:noscroll>
<Image
id={id}
sizeKey="postcard"

View File

@@ -7,7 +7,7 @@
</script>
{#if photos}
<div class="collage">
<div class="collage" class:is-hovering={hovered !== null}>
{#each photos as { slug, title, image, location, city }, index}
<PhotoCard
id={image.id}
@@ -16,7 +16,7 @@
title={title}
location={location}
city={city}
hovered={hovered !== null && hovered !== index}
hovered={hovered === index}
on:hover={({ detail }) => hovered = detail ? index : null}
/>
{/each}