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就不再成立，上面的样式也会停止生效。

要解决此问题，简单的解决方案是在整个下拉列表中指定悬停事件，即包含.dropdown的父.dropdown-menu元素。在此元素上使用悬停事件意味着当您将鼠标悬停在.btn-primary上方并悬停在其下方的.dropdown-menu导航栏上时，.dropdown:hover仍然是真的，因为您仍然在孩子上空盘旋.dropdown的元素。

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

那是你在找什么？

下拉悬停状态，在鼠标悬停时保持活动状态（文本）

1 个答案: