Div가 호버에 나타납니다

Question

이것은 div-appear-on-hover 상황에 불과하지만 #1949_neon의 div는 내가 #1949_wrapper에 마우스를 올려 놓으면 나타나지 않습니다. div가 올바른 위치에 있다고 확신합니다. 가시성을 block으로 변경하면 올바른 위치에 표시되기 때문입니다.

<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

이것은 CSS로 달성 될 수있다. 여기서 문제는 ID가 숫자로 시작한다는 것입니다. 이 작동합니다.

<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

그냥 CSS로 할 수 없습니다.

는

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

과 CSS에에 HTML을 변경

:

.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

CSS를 사용하면됩니다. CSS에서 잘못된 점은 작동하지 않는 번호로 시작하는 ID를 가지고 있다는 것입니다. 다음은 작동하는 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; 
}