在JavaScript中悬停在另一个div上时淡入div

Question

当我将鼠标悬停在div2上时，我会尝试显示div3和div1。

这是jsfiddle：http://jsfiddle.net/AbEZm/

HTML：

<div onMouseOver="show()" onMouseOut="hide()">Div 1 Content</div>
<div id="div2" style="display: none;>Div 2 Content</div>
<div id="div3" style="display: none;>Div 3 Content</div>

JavaScript的：

function show() {
    document.getElementById('div2', 'div3').style.display = 'block';
}

function hide() {
    document.getElementById('div1').style.display = 'none';
}

但是这些功能不会使div2和div3出现。有什么问题？

Answer 1

使用css。

而不是使用javascript

HTML:
<div id="div1">div1</div>
<div id="div2">div2</div>

CSS:

#div2{
    opacity: 0;
    transition: opacity .4s;
    -moz-transition: opacity .4s; /* Firefox 4 */
    -webkit-transition: opacity .4s; /* Safari and Chrome */
    -o-transition: opacity .4s; /* Opera */
}
#div1:hover + #div2{
    opacity: 1;
}

Answer 2

您无法将两个参数传递给getElementById。此外，您的HTML无效，因为您未关闭"属性的style。

我不知道你想要达到的目标，但是我修改了你的代码以使其有效...

http://jsfiddle.net/AbEZm/2/

然而，更好的选择是使用:hover CSS选择器。