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

【问题标题】：CSS/JavaScript - Adding the :focus state when an element is hoveredCSS/JavaScript - 当元素悬停时添加 :focus 状态
【发布时间】：2017-06-10 13:58:36
【问题描述】：

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

我搜索了一下，找到了这个sn-p：

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

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

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

所以问题是：当:hover 处于活动状态时，有没有办法强制:focus 状态？

我尝试过这样做：

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

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

【问题讨论】：

你试过删除:focus，所以你有.dropdown:hover #home .dropdown-toggle {吗？
你不能通过纯CSS强制:focus；您必须通过 JavaScript，通过 element.focus() 方法来执行此操作。
很高兴知道它为我指明了正确的方向。

标签： javascript html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

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

在css中

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

当焦点打开时，css 被应用。

【讨论】：

这是一个很好的答案，我唯一的问题是，我可以扩展它，以便当悬停消失时，焦点也会丢失。
直到你想在元素上保持 :focus 状态？
当我悬停菜单时，所以当我取消悬停菜单时，焦点会丢失。
在我的情况下 :focus 似乎不适用于
项目，而使用开发工具强制 :focus 有效 :/

【解决方案2】：

我将其视为“JavaScript 事物”。您可以将“鼠标悬停”事件附加到菜单，触发该事件后，将更改菜单的 CSS 和 .dropdown-toggle 元素的 CSS。

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

一个简单的例子：https://jsfiddle.net/matu2vd6/5/

HTML：

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

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

JS/JQUERY：

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"});
});

【讨论】：

我觉得这也是一个可行的答案，我更改为焦点状态的原因是因为焦点状态本身在不悬停时很有用，比如在平板电脑上时。 - 所以我想，如果它们仍然存在，为什么不将它们应用于悬停？