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会被应用。

Answer 2

我认为这是一个JavaScript事物＆＃39;。你可以附上一个鼠标悬停＆＃39;事件到菜单，当被触发时，将改变菜单的CSS和.dropdown-toggle元素的CSS。

我认为触发＆＃34;焦点＆＃34;并不是很有意义。如果您使用JavaScript，则修改CSS状态（在此特定示例中，我将使用JQuery库）。

一个简单的例子：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"});
});

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

2 个答案: