Skip to main content
Advanced Svelte Special elements <svelte:body>

Similar to <svelte:window> and <svelte:document>, 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 onmouseenter and onmouseleave handlers to the <svelte:body> tag...

App
<svelte:body
	onmouseenter={() => hereKitty = true}
	onmouseleave={() => hereKitty = false}
/>

...and hover over the <body>.

Edit this page on GitHub

previous 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 = $state(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>