Sveltesveltebody

Svelte <svelte:body>

和<svelte:window>类似，该 <svelte:body>标签允许你添加事件监听document.body。 该标签与 mouseenter 和 mouseleave 事件一起使用， 不会触发 window事件。将 mouseenter 和 mouseleave 函数添加到 <svelte:body>标签内：<svelte:body

on:mouseenter={handleMouseenter}

on:mouseleave={handleMouseleave}

/>示例代码App.svelte<script>

let hereKitty = false;

const handleMouseenter = () => hereKitty = true;
const handleMouseleave = () => hereKitty = false;

</script>

<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>

<svelte:body

on:mouseenter={handleMouseenter}

on:mouseleave={handleMouseleave}

/>

<!-- 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="tutorial/kitten.png"

>