OnMouseOver & OnMouseOut

by Renilson Meneguci

HTML

<div id="content">
    <p>Randrade</p>
</div>
    <br>
        <div id="pop"><img src="http://www.devmedia.com.br/imagens/fotoscolunistas/397347_20150704190512.png" id="img"> </div>

CSS

#content {
    height: 80px;
    width:100px;
    border: 1px solid red;
    text-align:center;
    
}

#img {
    height: inherit;
    width: inherit;
}
#pop {
    height: 150px;
    width:200px;
    border: 1px solid red;
    background-color: red;
}

JavaScript

function showPop() {
 pop.style.visibility = 'visible';
}
function hidePop() {
    pop.style.visibility = 'hidden';
}

function init() { 
    var pop = document.getElementById("pop");
    pop.style.visibility = 'hidden';
    var obj = document.getElementById("content");
    obj.onmouseover = showPop;
    obj.onmouseout = hidePop;
}

window.onload = init;