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