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:
@@ -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"
|
||||
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user