CSS/JavaScript-在元素悬停时添加：焦点状态

所以我有一个使用标准Bootstrap3类和结构的导航栏，最近我想看看你是否可以在hover上打开下拉菜单

我进行了一些搜索，找到了以下片段：

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

这将打开悬停菜单，这非常棒（无需切换

。下拉切换

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

所以问题是：当
：hover
处于活动状态时，是否有办法强制执行
：focus
状态

我试着这样做：

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

所以基本上在hover上向focus添加样式，但我认为我实际上需要做的是在
：hover
上添加
：focus
类，那么这更像是一个JavaScript吗

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

和css

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

当焦点处于打开状态时，css将被应用。
我将其视为“JavaScript事件”。您可以将“mouseover”事件附加到菜单，当触发该事件时，将更改菜单的css和.dropdown toggle元素的css

如果您使用的是JavaScript，我认为触发CSS修改的“焦点”状态没有多大意义（在这个特定示例中，我将使用JQuery库）

一个简单的例子：

HTML:

你有没有试过删除
：focus
，所以你有了
。下拉：hover#home。下拉切换{
？你不能通过纯CSS强制
：focus
；你必须通过JavaScript，通过
元素。focus（）
方法。这很好，因为它为我指明了正确的方向。这是一个很好的答案，我唯一的问题是，我是否可以扩展它，以便在鼠标悬停时，焦点也会丢失。直到您想在元素上保持：焦点状态？当我鼠标悬停菜单时，取消鼠标悬停菜单时，焦点会丢失。在我的情况下：焦点不会丢失eem要处理
项，同时强制：focus with dev tools works:/我觉得这也是一个可行的答案，我之所以要更改为focus状态，是因为focus状态本身在不悬停时很有用，比如在平板电脑上。-所以我想，如果它们存在，为什么不在悬停时应用它们呢？
<div class='dropdown'>My dropdown element.</div>

<div class='dropdown-toggle'>My dropdown-toggle element.</div>

let dropDownEl = $(".dropdown");
let dropDownToggleEl = $(".dropdown-toggle");

dropDownEl.on("mouseover", function() {
  dropDownToggleEl.css({"background": "#00aaff",
    "border": "#00aaff 1px solid"});
});
dropDownEl.on("mouseout", function() {
  dropDownToggleEl.css({"background": "transparent",
    "border": "none"});
});