將鼠標懸停在另一個div上時淡入div

Question

當我將鼠標懸停在div1時，我試圖使div2和div3出現。

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

而不是使用javascript，請使用CSS。

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選擇器。