2

查看我在CodePen或BootPly上​​工作的示例。

我遇到的问题是单击“Publisher”，然后再次单击，当鼠标移开以选择另一个项目时，悬停效果保持不变。

我的问题是：是什么原因造成的，我怎样才能让悬停效果仅在悬停时激活，而不是在切换开关后保持活动状态然后悬停在另一个项目上？

如果之前已解决此问题，请将我重定向到另一个 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>
4

1 回答 1

1

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

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

演示

这读作“当#dPublisher聚焦但未悬停时，更改背景和文本颜色”。

浏览器兼容性为 Chrome、Firefox、IE9、Opera 9.5 和 Safari 3.2。在不受支持的浏览器上，它将保持当前状态。

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

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

演示

于 2013-08-07T21:11:34.323 回答