javascript - Tumblrの投稿でマウスオーバーDiv

Question

私はこの気の利いたコードを見つけました：

<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>

Tumblrで事前に決定されたdivのdivを表示/非表示にするために使用しようとしていますが、おそらく間違って使用しています。これは機能しますか、それとも別のコードを使用する必要がありますか？

Answer 1

必要な機能は次のとおりです。

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';
    }
}