javascript - 鼠标悬停时显示/隐藏 div

Question

JavaScript:

$( document ).ready(function() {
    function show(id) {
        document.getElementById(id).style.visibility = "visible";
    }
    function hide(id) {
        document.getElementById(id).style.visibility = "hidden";
    }
});

和 HTML:

<table>
    <tr>
        <td id="one">
                <div class="content" onMouseOver="show('text')"  onMouseOut="hide('text')">
                    <h1>Heading</h1>
                    <p id="text">Lorem ipsum</p>
                </div>
            </div>
        </td>
</table>

Lorem ipsum 应该在鼠标悬停在 content div 上时显示，但它不起作用。它被封装在表格中，因为还有其他三个内容 div 构成了 2 x 2 网格。

Answer 1

show 不在全局对象上，它位于闭包中，因此当您的 HTML 事件处理程序尝试调用它时，它不存在。

使用CSS代替

#text {
    visibility: hidden;
}

.content:hover #text {
    visibility: visible;
}