css - Bootstrap DropdownButton 悬停时间过长

Question

我在使用 DropdownButton 时遇到问题，我不知道为什么悬停效果比下拉菜单的实际大小长。我的 DropdownButton 位于 Telerik 网格内，这可能会导致问题。为了简单起见，我将附上屏幕截图以及我如何实现 DropdownButton。如果我发布我正在使用的整个 Grid，那就太难理解了。

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
        <button class="dropdown-item" type="button">Action</button>
        <button class="dropdown-item" type="button">Another action</button>
        <button class="dropdown-item" type="button">Something else here</button>
    </div>
</div>

如您所见，是悬停效果太长了:

Answer 1

我认为这与您发布的代码无关。必须有一些东西覆盖默认的 Bootstrap 悬停效果。

尝试添加以下内容:

.dropdown-item:focus, .dropdown-item:hover{
  width: 100%;
}