javascript - 将鼠标悬停在 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

不要使用 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 选择器。