Fade in a div when hovered over another div in JavaScript

Question

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?

There are so many things wrong with that code. You haven't closed your style attributes. You can't call `getElementById` with two parameters. — James Montagne, May 17 '13 at 03:20
@JamesMontagne ohhh. yeah i'm kinda new to this. so thanks. i'll fix that now. — Elvain, May 17 '13 at 03:22
I would call what you have (and accepted) "Pop-in" rather than "Fade-in", but hey-ho — Xotic750, May 17 '13 at 03:54

score 1 · Answer 1 · answered May 17 '13 at 03:26

1

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;
}

answered May 17 '13 at 03:26

Zachrip

3,242
1
17
32

thanks for replying. But I wanted to use javascript instead of css so yeah. but thanks!! – Elvain May 17 '13 at 03:36
@Elvain I'm curious, why are you using Javascript to do this? – Zachrip May 17 '13 at 03:41
because I needed to implement three objects that involves javascript in my website so I chose to do this – Elvain May 17 '13 at 03:45
@Elvain For a class? That's cool, good luck in the class if you're taking one :P – Zachrip May 17 '13 at 03:50
Gotta love CSS, and CSS3 transition: +1 – Xotic750 May 17 '13 at 03:53

score 0 · Accepted Answer · answered May 17 '13 at 03:22

0

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.

answered May 17 '13 at 03:22

plalx

42,889
6
74
90

thank-you that was what I was trying to do. yeah I know I should revise the basics. but thanks again! – Elvain May 17 '13 at 03:28
@Elvain Although his answer does work, I highly suggest taking a look at my answer. Javascript is not needed for something like this, use CSS, I've also included fading. – Zachrip May 17 '13 at 03:32
@plalx how do I make it so that you could also hover over the hidden divs once its activated by the visible div? – Elvain May 17 '13 at 03:43
Consider this rather than inline event handlers: http://stackoverflow.com/questions/5871640/why-is-using-onclick-in-html-a-bad-practice and http://en.wikipedia.org/wiki/Unobtrusive_JavaScript also http://stackoverflow.com/questions/3142710/inline-styles-vs-classes – Xotic750 May 17 '13 at 03:57

Fade in a div when hovered over another div in JavaScript

2 Answers2