Skip to main content
基本 Svelte
介绍
反应性
属性
逻辑
事件
绑定
类和样式
动作
转换
高级 Svelte
高级反应性
重用内容
运动
高级绑定
高级转换
上下文 API
特殊元素
<script module>
后续步骤
基本 SvelteKit
介绍
路由
加载数据
标题和 cookie
共享模块
表单
API 路由
$app/state
错误和重定向
高级 SvelteKit
钩子
页面选项
链接选项
高级路由
高级加载
环境变量
结论

<svelte:window><svelte:document> 类似,<svelte:body> 元素允许你监听在 document.body 上触发的事件。这对于 mouseentermouseleave 事件很有用,因为 window 不会触发。

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

onmouseenteronmouseleave 处理程序添加到 <svelte:body> 标签...

¥Add onmouseenter and onmouseleave handlers to the <svelte:body> tag...

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

...并将鼠标悬停在 <body> 上。

¥...and hover over the <body>.

上一页 下一页
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>