CSS/JavaScript - 当元素悬停时添加 :focus 状态

Question

所以我有一个使用标准 Bootstrap 3 类和结构的导航栏，最近我想看看是否可以在悬停时打开下拉菜单。

我做了一些搜索，发现了这个片段：

.dropdown:hover .dropdown-menu{
    display: block;
} 

这会在悬停时打开菜单，这很棒（无需切换.dropdown-toggle

我的问题是我.dropdown-toggle有一个focus状态，只有当焦点被赋予元素时才会发生，所以当我悬停并且菜单打开时，我的悬停状态永远不会应用，因为我不必再单击顶部菜单项。

那么问题来了：有没有办法强制激活:focus状态:hover？

我尝试这样做：

.dropdown:hover #home .dropdown-toggle:focus{
    background: #00aaff;
    border: #00aaff 1px solid;
}

所以基本上在悬停时将样式添加到焦点，但我认为我实际上需要做的是添加类，:focus所以:hover这更像是 JavaScript 的事情吗？

Answer 1

$(".dropdown").hover(function(){
  $('#home .dropdown-toggle').focus();
});

并且在CSS中

#home .dropdown-toggle:focus{
   background: #00aaff;
   border: #00aaff 1px solid;
}

当焦点位于时，CSS 就会应用。