下拉悬停状态在悬停在子项（文本）上时保持活动状态

Question

我试图在将光标移动到下拉列表中的子项目时保持文本按钮的悬停 CSS 状态，但似乎找不到正确的解决方案？

一切正常，除了当我将光标向下移动到子项上时父项变回正常状态。

CSS

.btn-primary {
  color: #585a5c;
  background-color: #ffffff;
  border-color: #ffffff;
  font-family:engravers;
  font-size:13px;
  text-align:center;
  text-transform: uppercase;
  letter-spacing: 4px;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
  color: #585a5c;
  background-color: #ffffff;
  border-color: #ffffff;
  font-family:timesitalic;
  font-size:15px;
  text-transform: capitalize;
}

HTML

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Gallery Of Images
    <!--<span class="caret"></span>--></button>
    <ul class="dropdown-menu">
        <li><a href="gallery/1.html">ONE</a></li>
        <li><a href="gallery/2.html">TWO</a></li>
    </ul>
</div>

Answer 1

我认为您只需更改悬停事件的选择器即可。如果我正确理解你想做什么，你需要改变这个：

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
  color: #585a5c;
  background-color: #ffffff;
  border-color: #ffffff;
  font-family:timesitalic;
  font-size:15px;
  text-transform: capitalize;
}

对此：

.dropdown:hover .dropdown-toggle.btn-primary {
  color: #585a5c;
  background-color: #ffffff;
  border-color: #ffffff;
  font-family:timesitalic;
  font-size:15px;
  text-transform: capitalize;
}

您遇到的问题是，当您将鼠标悬停在 .btn-primary 元素上时，您只是将上述样式集应用于该特定元素。这意味着一旦您将光标从主导航项上移到下面的导航菜单上，.btn-primary:hover 就不再正确，上面的样式将停止生效。

要解决这个问题，简单的解决方案是在整个下拉菜单中指定悬停事件，即 parent .dropdown 元素也包括 .dropdown-menu。在这个元素上使用悬停事件意味着当你从悬停在 .btn-primary 上切换到悬停在它下面的 .dropdown-menu 导航上时，.dropdown:hover 仍然是真的，因为你仍然悬停在 child .dropdown 的元素。

剩下的就是确保您的样式影响正确的元素，因此在悬停选择器之后定位 .dropdown-toggle.btn-primary。

这就是你要找的吗？

下拉悬停状态在悬停在子项（文本）上时保持活动状态

Dropdown Hover State to stay active while hovering over child (text)

css

hover

dropdown