Html 单击链接时，使用鼠标悬停和关闭菜单打开下拉列表

我有一个用鼠标打开的下拉菜单：悬停。现在我需要一个功能，关闭菜单时，点击菜单中的一些链接。我想至少需要JS

.dropdow{
位置：相对位置；
显示：内联块；
宽度：25%；
}
.差距{
文本对齐：居中；
填充：1em 0em；
背景色：#f47721；
利润率最高：6%；
盒影：0 4px10px 0 rgba（0,0,0,0.16）；
边界半径：2%；
}
.dropbt1{
背景色：#f47721；
颜色：白色；
填充：1px；
字体大小：13px；
边界：无；
光标：指针；
}
.dropdow-content1{
显示：无；
位置：绝对位置；
背景色：#f47721；
/*最小宽度：160px*/
盒影：0 4px10px 0 rgba（0,0,0,0.16）；
z指数：1；
}
.dropdow-Content1A{
颜色：白色；
填充：8px 3px；
文字装饰：无；
显示：块；
}
.dropdow-Content1A：悬停{
背景色：#d86a1e
}
.dropdow:hover.dropdow-content1{
显示：块；
宽度：100%；
}

下拉菜单
请选择

是的，但您可能需要通过添加

和复选框来更改某些布局：

.dropdow{
位置：相对位置；
显示：内联块；
宽度：25%；
}
.差距{
文本对齐：居中；
填充：1em 0em；
背景色：#f47721；
利润率最高：6%；
盒影：0 4px10px 0 rgba（0,0,0,0.16）；
边界半径：2%；
}
.dropbt1{
背景色：#f47721；
颜色：白色；
填充：1px；
字体大小：13px；
边界：无；
光标：指针；
}
.dropdow-content1{
显示：无；
位置：绝对位置；
背景色：#f47721；
/*最小宽度：160px*/
盒影：0 4px10px 0 rgba（0,0,0,0.16）；
z指数：1；
}
.dropdow-Content1A{
颜色：白色；
填充：8px 3px；
文字装饰：无；
显示：块；
}
.dropdow-Content1A：悬停{
背景色：#d86a1e
}
#dd{
显示：无；
}
#dd：选中+。dropdow-content1{
显示：块；
宽度：100%；
}

下拉菜单
请选择

是的，但您可能需要通过添加

和复选框来更改某些布局：

.dropdow{
位置：相对位置；
显示：内联块；
宽度：25%；
}
.差距{
文本对齐：居中；
填充：1em 0em；
背景色：#f47721；
利润率最高：6%；
盒影：0 4px10px 0 rgba（0,0,0,0.16）；
边界半径：2%；
}
.dropbt1{
背景色：#f47721；
颜色：白色；
填充：1px；
字体大小：13px；
边界：无；
光标：指针；
}
.dropdow-content1{
显示：无；
位置：绝对位置；
背景色：#f47721；
/*最小宽度：160px*/
盒影：0 4px10px 0 rgba（0,0,0,0.16）；
z指数：1；
}
.dropdow-Content1A{
颜色：白色；
填充：8px 3px；
文字装饰：无；
显示：块；
}
.dropdow-Content1A：悬停{
背景色：#d86a1e
}
#dd{
显示：无；
}
#dd：选中+。dropdow-content1{
显示：块；
宽度：100%；
}

下拉菜单
请选择

作为一般规则，CSS不能捕获点击来“执行操作”。Kumar的解决方案劫持了一个接受状态的隐藏HTML元素。不幸的是，您无法使用CSS更改复选框状态“checked/unchecked”，因此您将无法使用鼠标悬停触发菜单

如果您想同时使用悬停触发器（

onMouseEnter

）和关闭单击（

onClick

）事件退出，则需要使用一些javascript

也就是说，我强烈建议您重新考虑使用多种交互类型。鼠标悬停/点击组合不利于可用性，因为它要求人们理解并能够使用这两种交互。例如，鼠标悬停不会在触摸设备上触发。没有什么可以帮助用户理解“单击退出”和“悬停打开”

---

如果你想让大多数用户，尤其是触摸设备上的用户，都能使用这个功能，我会坚持只点击。

一般来说，CSS不能捕捉点击来“执行操作”。Kumar的解决方案劫持了一个接受状态的隐藏HTML元素。不幸的是，您无法使用CSS更改复选框状态“checked/unchecked”，因此您将无法使用鼠标悬停触发菜单

如果您想同时使用悬停触发器（

onMouseEnter

）和关闭单击（

onClick

）事件退出，则需要使用一些javascript

也就是说，我强烈建议您重新考虑使用多种交互类型。鼠标悬停/点击组合不利于可用性，因为它要求人们理解并能够使用这两种交互。例如，鼠标悬停不会在触摸设备上触发。没有什么可以帮助用户理解“单击退出”和“悬停打开”

---

如果你想让大多数用户，尤其是触摸设备上的用户，都能使用这一功能，我会坚持使用“仅单击”按钮。

@kumar，当鼠标悬停时，这段代码将不再打开菜单，如果你单击像down1这样的链接，则不会关闭。也许有点mistake@kumar，这是一个非常有趣的解决方案@布鲁诺2000你也可以拥有它。只需添加CSS即可。@BryceHowitson谢谢。注意！我不应该只关注现有的评论。抱歉@PraveenKumarPurushothaman@kumar，此代码在悬停时将不再打开菜单，如果单击像down1这样的链接，则不会关闭。也许有点mistake@kumar，这是一个非常有趣的解决方案@布鲁诺2000你也可以拥有它。只需添加CSS即可。@BryceHowitson谢谢。注意！我不应该只关注现有的评论。抱歉@Praveenkumarpurushothaman在触摸设备上更改悬停触发器以单击事件在触摸设备上更改悬停触发器以单击事件