Показать/скрыть 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 должен показать при наведении указателя мыши над контента DIV, но это Безразлично» т работы. Он заключен в таблицу, потому что есть три других разделителя контента, которые делают сетку 2 на 2.

Answer 1

show не находится на глобальном объекте, он находится в закрытии, поэтому, когда обработчики событий HTML пытаются его вызвать, его не существует.

Используйте CSS вместо

#text { 
    visibility: hidden; 
} 

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

Answer 2

Ваши функции должны быть в глобальном масштабе, за пределами document.ready:

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

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

Answer 3

Вы должны определить свои две JavaScript функции вне JQuery среды/объем.

См. Ниже.

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>

Answer 4

Это удобно использовать 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>

Answer 5

Просто определить функции вне сферы JQuery.

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