JavaScript:
$( document ).ready(function() {
function show(id) {
document.getElementById(id).style.visibility = "visible";
}
function hide(id) {
document.getElementById(id).style.visibility = "hidden";
}
});
And 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 is supposed to show when the mouse hovers over the content div, but it doesn't work. It is encased in a table because there are three other content divs that make a 2 by 2 grid.
show
is not on the global object, it's in a closure, so when your HTML event handlers tries to call it, it doesn't exist.
Use CSS instead
#text {
visibility: hidden;
}
.content:hover #text {
visibility: visible;
}
Your functions need to be in global scope, outside of document.ready
:
$( document ).ready(function() {
//...
});
function show(id) {
document.getElementById(id).style.visibility = "visible";
}
function hide(id) {
document.getElementById(id).style.visibility = "hidden";
}
You need to define your two JavaScript functions outside of the jQuery environment/scope.
See below.
function show(id) { document.getElementById(id).style.visibility = "visible"; } function hide(id) { document.getElementById(id).style.visibility = "hidden"; }
.content { border: 1px dotted blue; } #text { visibility: hidden; }
<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>
It's convenient to use jQuery. Also, try not to put JavaScript directly in the HTML tags. The problem here was a scope issue.
$(".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>
Just define the functions outside the jQuery scope.
<script>
function show(id) {
document.getElementById(id).style.visibility = "visible";
}
function hide(id) {
document.getElementById(id).style.visibility = "hidden";
}
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.