Div Appears on Hover - html

Question

This is supposed to be a simple div-appear-on-hover situation, but the div with #1949_neon is just not showing up after I hover on #1949_wrapper.
I am very sure that the div is at the right place, because when I change the visibility to block, it's showing up at the right place.
<div id="1949_wrapper">
<div class="year_line" style="top:170px;">1949</div>
<div class="neon_light" id="1949_neon"></div>
</div>
.neon_light{
position:relative;
top: 0px;
width:250px;
height:650px;
background:#FFFF00;
z-index: 1;
}
#1949_neon {
display: none;
}
#1949_wrapper:hover #1949_neon {
display: block;
}

Answer 1

This can be achieved with css. The issue here is your id's starting with a number. This works.
<div id="wrapper_1949">
<div class="year_line" style="top:170px;">1949</div>
<div class="neon_light" id="neon_1949"></div>
</div>
.neon_light{
position:relative;
top: 0px;
width:250px;
height:650px;
background:#FFFF00;
z-index: 1;
}
#neon_1949 {
display: none;
}
#wrapper_1949:hover #neon_1949 {
display: block;
}

Answer 2

You can't do it just by css.
Change your HTML to
<div id="1949_wrapper" onmouseover="document.getElementById('1949_neon').style.display = 'block';">
<div class="year_line" style="top:170px;">1949</div>
<div class="neon_light" id="1949_neon"></div>
</div>
and your css to:
.neon_light {
position:relative;
top: 0px;
width:250px;
height:650px;
background:#FFFF00;
z-index: 1;
display:none;
}
#1949_neon {
display: none !important;
}
Demo

Answer 3

You can do it using CSS. What is going wrong with your CSS is you are having ID starting with a number which will not work. Here is the working CSS.
.neon_light{
position:relative;
top: 0px;
width:250px;
height:650px;
background:#FFFF00;
z-index: 1;
}
[id='1949_neon'] {
display: none;
}
[id='1949_wrapper']:hover [id='1949_neon'] {
display: block;
}