Question

以下代码显示了一个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();

Here is a jsfiddler

Answer 1

我找到了一个技巧。您可以使用display:inline-block;和background:transparent;，并将padding:2px;的技巧添加到#container div。它会以你想要的方式工作;）

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

Answer 2

你是对的，禁用的元素不会触发jQuery鼠标事件，因此，你的工具提示仍未触发。

如果你将鼠标悬停在文本框右侧的小绿色条子上，它会触发。解决此问题的一种方法是将文本框移动到容器onDisabled后面。

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

显然，如果您仍希望看元素，那么背景的限制需要透明，但是，它在Firefox中可以正常工作。

JSFiddle

Answer 3

解决方案：

在firefox地址栏中输入about：config并按下输入搜索以下选项browser.chrome.toolbar_tips并切换它。转到＆＃34; about：config＆＃34;并切换＆＃34; browser.chrome.toolbar_tips＆＃34; to＆＃34; true＆＃34;。

的Rahul

Hover事件不会在firefox中触发

3 个答案:

JSFiddle