0

当我将鼠标div2悬停div3div1.

这是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 出现。怎么了?

4

2 回答 2

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;
}
于 2013-05-17T03:26:59.340 回答
0

您不能将两个参数传递给getElementById. 此外,您的 HTML 无效,因为您没有关闭"style属性。

我不知道你想要达到什么目的,但是我修改了你的代码以使其工作......

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

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

于 2013-05-17T03:22:50.300 回答