为什么这个onMouseOut事件不会在Firefox中激活?

时间:2012-11-14 07:39:21

标签: javascript html css

我以前见过这个问题,但到目前为止还没有找到具体的答案。我有一个onmouseout事件,除了Firefox之外几乎可以用于所有事情。它甚至没有出现在Firebug中,完全没有任何意义。

以下是令人讨厌的代码行:

<div id="MarketBox3" class="MarketBox" style="top: 205px;">
<div id="TimeBox3Cont" class="TimeBox"><h3 ifirefoxd="TimeBox3" style="color: white; text-     shadow: 0px 0px 5px #000; letter-spacing: 1px; font-size: 12px;"></h3></div>
<div id="TimeBar3" class="TimeBar" style="left: 300px; width: 300px;" onmouseover="CheckOpen(3)" onmouseout="document.getElementById('intext3').innerText = 'bla bla'">
<div id="MarketName3" class="MarketName">
<div id="inbox3" style="position: absolute; top: -2px; height: 30px; width: 300px;">
<h3 id="intext3" style="color: white; text-shadow: 0px 0px 2px #000; letter-spacing: 1px; font-size: 16px;">Frankfurt - Germany</h3>
</div>
</div>
</div>
</div>

任何人都可以对正在发生的事情有所了解吗?除了Firefox之外,它几乎可以正常工作。

1 个答案:

答案 0 :(得分:5)

这很好用:

<div id="MarketBox3" class="MarketBox" style="top: 205px;">
<div id="TimeBox3Cont" class="TimeBox"><h3 id="TimeBox3" style="color: white; text-     shadow: 0px 0px 5px #000; letter-spacing: 1px; font-size: 12px;"></h3></div>
<div id="TimeBar3" class="TimeBar" style="left: 300px; width: 300px;" onmouseover="document.getElementById('intext3').innerText = '111'" onmouseout="document.getElementById('intext3').innerText = 'bla bla'">
<div id="MarketName3" class="MarketName">
<div id="inbox3" style="position: absolute; top: -2px; height: 30px; width: 300px;">
<h3 id="intext3" style="color: white; text-shadow: 0px 0px 2px #000; letter-spacing: 1px; font-size: 16px;">Frankfurt - Germany</h3>
</div>
</div>
</div>
</div>

Demo on JS Fiddle

您的 CheckOpen()功能可能存在问题,

尝试

onmouseover="alert(1)"

onmouseout="alert(2)"

而不是

onmouseover="CheckOpen(3)"

另一个建议

似乎Firefox treats innerText differently than other browsers

使用javascript库会清除此问题,因为它会自动处理浏览器行为的差异。

我尝试使用jQuery,它运行正常。

<div id="MarketBox3" class="MarketBox" style="top: 205px;">
<div id="TimeBox3Cont" class="TimeBox"><h3 id="TimeBox3" style="color: white; text-     shadow: 0px 0px 5px #000; letter-spacing: 1px; font-size: 12px;"></h3></div>
<div id="TimeBar3" class="TimeBar" style="left: 300px; width: 300px;" onmouseover="javasript:function f(){ $('#intext3').text('bla bla');} f(); " onmouseout="javasript:function g(){ $('#intext3').text('1111');} g(); ">
<div id="MarketName3" class="MarketName">
<div id="inbox3" style="position: absolute; top: -2px; height: 30px; width: 300px;">
<h3 id="intext3" style="color: white; text-shadow: 0px 0px 2px #000; letter-spacing: 1px; font-size: 16px;">Frankfurt - Germany</h3>
</div>
</div>
</div>
</div>

Demo on JS Fiddle