JavaScript:onmouseout 事件在 onmouseover 后不起作用

Question

我正在尝试为工具提示编写代码，当鼠标移到它上面时，文本会显示，当它移开时，它就会消失。我试图通过更改类来做到这一点(CSS 中的 tipHide 具有 display:none，而 tipShow 具有 display: block)，但是 onmouseout 事件不会将类改回(我通过查看生成的源代码知道这一点)。

如何修复此问题，以便在 onmouseover 事件已更改类时触发 onmouseout 事件。

我的 HTML:

<div id="zha" class="cfield">
    <p id="qmark"></p>
    <p id="toolTip" class="tipHide">Text Shown</p>
</div>

和 JavaScript:

function toolTip() {           
    document.getElementById('qmark').onmouseover = function() {
        var toolTip = document.getElementById('toolTip');
        toolTip.className = 'tipShow';
    }
    document.getElementById('qmark').onmouseout = function() {
        var toolTip = document.getElementById('toolTip');
        toolTip.classname = 'tipHide';
    }
}

我也想在不使用 JQuery 的情况下完成此操作

Answer 1

className 上可能有一个拼写错误属性(property)？在你的 onmouseout 中你得到了这个:

toolTip.classname = 'tipHide';

应该是(与您在 onmouseover 上所做的相同):

toolTip.className = 'tipHide';
             ^