Question

在发现引导按钮类似乎打破了标准CSS中的悬停功能后，我感到非常沮丧。

我真的不想使用工具提示，所以我决定尝试在我的按钮旁边显示我自己的灰色框，以显示它在悬停时被禁用的原因。这是我的代码：

HTML

#statement-delete:hover #delete-info {
    display: block;
}

#delete-info {
    display: none;
    background: #C8C8C8;
    margin-left: 0px;
    padding: 10px;
    position: absolute;
    z-index: 1000;
    width:200px;
    height:100px;
}

CSS

{{1}}

我认为在使用JSFiddle之前我肯定必须做错事，并且它神奇地起作用（在添加Bootstrap引用之前）。但是，只要我添加了Bootstrap的引用，就不会悬停...

这是小提琴：Text.Regex

如果删除左侧引导程序的引用，您将看到它的工作原理。

是否可以通过Bootstrap按钮使用Hover功能？或者我是否必须使用一些自定义jQuery来执行此操作？

Answer 1

Bootstrap将规则pointer-events:none添加到禁用元素的代码中，以防止悬停工作。您可以通过以下方式恢复更改来撤消此操作：

a.btn.disabled {
    pointer-events: auto;
}

<强> jsFiddle example

Answer 2

我建议您删除属性disabled="disabled"，因为您想要 hover功能。从逻辑上讲，如果你考虑一下，元素必须是＆＃34;启用＆＃34;让hover工作。同样，您也可以出于同样的原因删除CSS类disabled类。

事情是Bootstrap将属性pointer-events: none;添加到类disabled。此属性的定义（借用Mozilla Developer Network （https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events））是：

CSS属性指针 - 事件允许作者控制什么情况（如果有的话）特定的图形元素可以成为鼠标事件的目标。

你的解决方案实际上是取消此属性的效果。因此，删除上述属性，这是有效的。见下文：

＆＃13;

#statement-delete:hover #delete-info {
    display: block;
}

#delete-info {
    display: none;
    background: #C8C8C8;
    margin-left: 0px;
    padding: 10px;
    position: absolute;
    z-index: 1000;
    width:200px;
    height:100px;
    top: 48px;
    left: 0px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
 <a class="btn btn-danger" href="" id="statement-delete" onclick="return false;">Delete<span id="delete-info"></span></a>

＆＃13;

Bootstrap Library引用会破坏锚定悬停功能

2 个答案: