鼠标悬停显示/隐藏div

时间:2015-06-19 01:42:00

标签: javascript html

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应该在鼠标悬停在内容 div上时显示,但它不起作用。它被封装在一个表中,因为有三个其他内容div,它们构成一个2乘2的网格。

5 个答案:

答案 0 :(得分:2)

show不在全局对象上,它在一个闭包中,所以当你的HTML事件处理程序试图调用它时,它就不存在。

使用CSS代替

#text {
    visibility: hidden;
}

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

答案 1 :(得分:1)

您的职能必须在document.ready之外的全球范围内:

$( document ).ready(function() {
    //...
});

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

答案 2 :(得分:1)

您需要在jQuery环境/范围之外定义两个JavaScript函数。

见下文。

&#13;
&#13;
function show(id) {
  document.getElementById(id).style.visibility = "visible";
}

function hide(id) {
  document.getElementById(id).style.visibility = "hidden";
}
&#13;
.content {
  border: 1px dotted blue;
}
#text {
  visibility: hidden;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 3 :(得分:1)

使用jQuery很方便。另外,尽量不要将JavaScript直接放在HTML标记中。这里的问题是范围问题。

$(".content").hover(function() {
  $("#text").show();
}, function() {
  $("#text").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <td id="one">
      <div class="content">
        <h1>Heading</h1>
        <p id="text">Lorem ipsum</p>
      </div>
      </div>
    </td>
</table>

答案 4 :(得分:1)

只需定义jQuery范围之外的函数。

<script>
function show(id) {
 document.getElementById(id).style.visibility = "visible";
}
function hide(id) {
 document.getElementById(id).style.visibility = "hidden";
}
</script>