Flyout Menus提出了一个独特的挑战：创建一个悬停激活的菜单，该菜单仍然适用于所有用户，包括没有鼠标的用户。核心问题在于悬停行为。当子菜单出现在悬停时，用户的鼠标必须导航狭窄的路径与之交互。在该区域外的鼠标移动导致菜单关闭，导致了令人沮丧的用户体验。
以前已经解决了此问题，特别是使用“隐藏的命中区域”。虽然现在不太常见，但该技术以前曾经由亚马逊使用，涉及动态创建不可见的区域（通常使用SVG），该区域将悬停目标扩展到可见的子菜单之外。即使鼠标短暂离开了可见的子菜单区域，这也可以确保菜单保持打开状态。
Hakim El Hattab在2019年CSS Day展示的这种方法的现代实现，优雅地使用SVG动态创建了这些热门区域。这些区域本身是看不见的，但是它们有效地创造了更大，更宽容的悬停区域。
El Hattab演示文稿的视频摘录（从相关部分开始）可用[在这里 - YouTube Embed，如果这是网页，将在此处转到此处]
Slides.com模式库可用此技术的实时演示。
以上是菜单具有'动态命中区域”的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
SublimeText3 英文版
推荐：为Win版本，支持代码提示！
mPDF
mPDF是一个PHP库，可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件，并处理不同的语言。与原始脚本如HTML2FPDF相比，它的速度较慢，并且在使用Unicode字体时生成的文件较大，但支持CSS样式等，并进行了大量增强。支持几乎所有语言，包括RTL（阿拉伯语和希伯来语）和CJK（中日韩）。支持嵌套的块级元素（如P、DIV），
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
MinGW - 适用于 Windows 的极简 GNU
这个项目正在迁移到osdn.net/projects/mingw的过程中，你可以继续在那里关注我们。MinGW：GNU编译器集合（GCC）的本地Windows移植版本，可自由分发的导入库和用于构建本地Windows应用程序的头文件；包括对MSVC运行时的扩展，以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。
Atom编辑器mac版下载
最流行的的开源编辑器
