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:
<svelte:body
on:mouseenter={handleMouseenter}
on:mouseleave={handleMouseleave}
/>
App.svelte
xxxxxxxxxx
34
1
<script>
2
let hereKitty = false;
3
4
const handleMouseenter = () => hereKitty = true;
5
const handleMouseleave = () => hereKitty = false;
6
</script>
7
8
<style>
9
img {
10
position: absolute;
11
left: 0;
12
bottom: -60px;
13
transform: translate(-80%, 0) rotate(-30deg);
14
transform-origin: 100% 100%;
15
transition: transform 0.4s;
16
}
17
18
.curious {
Console
xxxxxxxxxx
61
1
/* App.svelte generated by Svelte v3.23.2 */
2
import {
3
SvelteComponent,
4
attr,
5
detach,
6
element,
7
init,
8
insert,
9
noop,
10
safe_not_equal,
11
space,
12
toggle_class
13
} from "svelte/internal";
14
15
function create_fragment(ctx) {
16
let t;
Compiler options
result = svelte.compile(source, {
generate:
});xxxxxxxxxx
1
1
img.svelte-ilp3wu{position:absolute;left:0;bottom:-60px;transform:translate(-80%, 0) rotate(-30deg);transform-origin:100% 100%;transition:transform 0.4s}.curious.svelte-ilp3wu{transform:translate(-15%, 0) rotate(0deg)}body{overflow:hidden}