Skip to main content

Similar to <svelte:window>, the <svelte:body> element allows you to listen for events that fire on document.body. This is useful with the mouseenter and mouseleave events, which don't fire on window.

Add these mouseenter and mouseleave handlers to the <svelte:body> tag...

App.svelte
<svelte:body
	on:mouseenter={() => hereKitty = true}
	on:mouseleave={() => hereKitty = false}
/>

...and hover over the <body>.

Next: <svelte:document>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<script>
	import kitten from './kitten.png';
 
	let hereKitty = false;
</script>
 
<svelte:body />
 
<!-- creative commons BY-NC http://www.pngall.com/kitten-png/download/7247 -->
<img
	class:curious={hereKitty}
	alt="Kitten wants to know what's going on"
	src={kitten}
/>
 
<style>
	img {
		position: absolute;
		left: 0;
		bottom: -60px;
		transform: translate(-80%, 0) rotate(-15deg);
		transform-origin: 100% 100%;
		transition: transform 0.4s;
	}
 
	.curious {
		transform: translate(-15%, 0) rotate(0deg);
	}
 
	:global(body) {
		overflow: hidden;
	}
</style>
initialising