悬停事件获胜'不要在萤火虫里生火

Hover event won't fire in firefox

本文关键字：萤火虫 获胜 事件 悬停      更新时间：2023-09-26

下面的代码显示了一个被禁用的文本框，它被包装在一个div中，并附有jQuery UI工具提示。当鼠标悬停在文本框（或者更准确地说，是文本框覆盖的div）上时，jQuery工具提示将在Chrome、Safari和IE中正确显示，但在Firefox（28.0）中不会显示。有人能解释这种行为并提供解决方案吗？我知道事件通常不会在禁用的元素上触发，所以这就是为什么它绑定到包装div的原因

HTML:

foo
<div id="container" title="Tooltip test" 
     style="background: green; display: inline; position: relative; z-index: 10">
<input id="box" type="textbox" disabled="disabled" value="baz" 
       style="position: relative; z-index: 1"></input>
</div>
bar

JavaScript:

$("#container").tooltip();

这是一个jsfiddler

我发现了一个窍门。你可以使用display:inline-block;和background:transparent;，并将技巧padding:2px;添加到#containerdiv.它将按照你想要的方式工作；）

http://jsfiddle.net/banded_krait/TAD2w/33/

您是正确的，被禁用的元素不会触发jQuery鼠标事件，因此，您的工具提示仍然不会触发。

如果你把鼠标悬停在文本框右侧的绿色小条上，它就会开火。对此的一个解决方案是将文本框移动到其容器onDisabled后面。

input[disabled]
{
    z-index: -1;
}

显然，如果您仍然想查看元素，这有背景需要透明的限制，但是，它在firefox中确实有效。

JSFiddle

解决方案：

在firefox地址栏中键入about:config，然后按回车搜索下面的选项browser.chrome.toolbar_tips并切换它。转到"about:config"并将"browser.cochrome.toolbar_tips"切换为"true"。

Rahul

相关文章：