Question

在 CodePen 或 BootPly 上查看我正在处理的示例。

我遇到的问题是，当点击“发布者”，然后再次点击时，鼠标移开以选择其他项目时，悬停效果会保持打开状态。

我的问题是：导致这种情况的原因，以及如何在悬停时仅将悬停效果仅激活，并且在切换到＆amp;状态后不保持活动状态然后将鼠标悬停在另一个项目上？

如果之前已经解决了，请将我重定向到另一个Q / A.

<div class="dropdown">
   <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
    <li class="dropdown">
    <a class="dropdown-toggle" id="dPublisher" data-toggle="dropdown" 
              role="button" data-target="#" href="publisher.php">PUBLISHER<b class="caret"></b></a>
    <ul class="dropdown-menu" role="menu" aria-labelledbyid="dPublisher">
        <li><a href="eeditions.php">E-Editions</a></li>
    <li><a href="digitalarchive.php">Digital Archive</a></li>
    </ul>
    </li>
    <li><a href="blog.php">BLOG</a></li>
  </ul>
</div>

Answer 1

样式在Bootstrap中的:focus和:hover上设置。您可以通过编辑Bootstrap源或使用更具体的选择器覆盖它来更改自己。

#dPublisher:focus:not(:hover) {
  background: white;
  color: black;
}

demo

这读作“当#dPublisher 专注但悬停时，更改背景和文字颜色”。

Browser compatibility是Chrome，Firefox，IE9，Opera 9.5和Safari 3.2。在不受支持的浏览器上，它将保持当前的状态。

如果您希望它仅在关闭下拉列表时禁用焦点样式，我们可以使其更加具体。

.dropdown:not(.open) > #dPublisher:focus:not(:hover) {
  background: white;
  color: black;
}

demo

Bootstrap下拉切换在第二次单击（切换关闭）后保持悬停效果

1 个答案: