Skip to main content

Part 3 / Special elements / <svelte:body>

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 the mouseenter and mouseleave handlers to the <svelte:body> tag:

App.svelte
<svelte:body
	on:mouseenter={handleMouseenter}
	on:mouseleave={handleMouseleave}
/>

Next: <svelte:head>

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
35
36
37
<script>
	let hereKitty = false;
 
	const handleMouseenter = () =>
		(hereKitty = true);
	const handleMouseleave = () =>
		(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.png"
/>
 
<style>
	img {
		position: absolute;
		left: 0;
		bottom: -60px;
		transform: translate(-80%, 0) rotate(-30deg);
		transform-origin: 100% 100%;
		transition: transform 0.4s;
	}
 
	.curious {
		transform: translate(-15%, 0) rotate(0deg);
	}
 
	:global(body) {
		overflow: hidden;
	}
</style>
initialising