CODEWITHSUNDEEP
javascripthideshow
Elvain
Elvain

Reputation: 27

Fade in a div when hovered over another div in JavaScript

I am trying to make div2 and div3 appear when I hover over div1.

Here is the 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';
}

But these functions do not make div2 and div3 appear. What is wrong?

Upvotes: 0

Views: 388

Answers (2)

Zachrip
Zachrip

Reputation: 3382

Instead of using javascript, use 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;
}

Upvotes: 1

plalx
plalx

Reputation: 43718

You cannot pass two arguments to getElementById. Also your HTML was invalid because you did not close the " for the style attribute.

I have no idea what you are trying to achieve exactly, however I modified your code to kinda make it work...

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

However a better alternative would be to make use of the :hover CSS selector.

Upvotes: 0

Related Questions