Question

这应该是一个简单的div-appear-on-hover情况，但是我悬停在#1949_neon后，#1949_wrapper的div才会显示。我非常确定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来完成。你的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;
}

Div出现在悬停状态

2 个答案: