Question

I found this nifty code:

<div style="width: 80px; height: 20px; background-color: red;" 
     onmouseover="document.getElementById('div1').style.display = 'block';">
   <div id="div1" style="display: none;" onmouseout="document.getElementById('div1').style.display = 'none';"> Text</div>
</div>

and I’ve been trying to use to show/hide a div onto of pre-determined divs on Tumblr, but I’m probably using it wrong, will this work or will I have to use another code?

Answer 1

Here is the functionality you need.

html

<div class="divStyle" onmouseover="showHide()" onmouseout="showHide()">
   <div id="div1" class="displayNone"> Text</div>
</div>

css

.divStyle { width: 80px; height: 20px; background-color: red; }
.displayNone { display: none; }

javascript

function showHide() {
    var obj = document.getElementById('div1');
    if(obj.style.display == 'block'){
        obj.style.display = 'none';
    }
    else
    {
        obj.style.display = 'block';
    }
}