Javascript 用鼠标悬停显示子元素，当焦点丢失时隐藏它

我有一个元素

（下拉内容）

，当其父元素（Element2）悬停时显示。当没有与元素

（下拉内容）

发生交互时，我希望它现在的行为和悬停结束时消失。但是，当元素获得焦点时（单击选择或输入或下拉内容中的其他位置），我希望它保持显示，直到失去焦点为止（在

下拉内容

之外的某个位置单击），即使课程离开

下拉内容

。 我已经尝试过使用CSS

和/或

javascript搜索和一些东西来找到解决方案，但无法归档我想要的内容。下面是一个示例代码来说明我的问题：

。下拉式内容{
显示：无；
位置：绝对位置；
边框：1px纯黑；
宽度：300px；
z指数：1；
}
.下拉：悬停。下拉内容，
.下拉内容：焦点{
显示：内联块；
}

要素1

元素2
选择1
选择2

元素3

您不需要Javascript，更不用说jQuery了。它可以并且可以用纯CSS和伪类来完成

。下拉式内容{
显示：无；
位置：绝对位置；
边框：1px纯黑；
保证金：-3px0.3px；
}
.下拉：悬停。下拉内容。下拉内容：焦点在{
显示：内联块；
}

要素1

元素2
选择1
选择2

元素3

您不需要Javascript，更不用说jQuery了。它可以并且可以用纯CSS和伪类来完成

。下拉式内容{
显示：无；
位置：绝对位置；
边框：1px纯黑；
保证金：-3px0.3px；
}
.下拉：悬停。下拉内容。下拉内容：焦点在{
显示：内联块；
}

要素1

元素2
选择1
选择2

元素3

元素文本（

Element3

）在悬停时重复，谢谢！那是我这边的疏忽。它现在应该工作了这正是我想要的并且解决了我的问题！我已经假设有这样一个简单的解决方案，但我没有做到：关注内部，非常感谢@不客气。我将

block

更改为

inline block

，并添加了一些边距，以便它显示在Element2旁边。这很好。我没有意识到这个

：关注内部
。感谢您的分享。元素文本（
Element3
）在悬停时会重复，谢谢！那是我这边的疏忽。它现在应该工作了这正是我想要的并且解决了我的问题！我已经假设有这样一个简单的解决方案，但我没有做到：关注内部，非常感谢@不客气。我将
block
更改为
inline block
，并添加了一些边距，以便它显示在Element2旁边。这很好。我没有意识到这个
：关注内部
。谢谢分享。