html - 悬停时出现 Div

标签 html css position

这应该是一个简单的 div-appear-on-hover 情况,但是当我将鼠标悬停在 #1949_wrapper 上时,带有 #1949_neon 的 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;
}

最佳答案

这可以用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;
}

关于html - 悬停时出现 Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22891369/

相关文章:

html - Angular.js 部分

html - 删除 anchor 下划线电子邮件签名

css - 无效的属性值 scss 函数

html - 当元素 Y 悬停时移动元素 X?

css - 如何使 float 元素列表跳过居中元素(书脊对齐/中心标记)?

html - 当使图像 float 时,其他 block 元素会落后于它吗?

javascript - 按数组中的字段过滤 - angularJS

jquery - 使用 jQuery 在 IE 中隐藏选择选项

html - 当位置设置为绝对时垂直显示韩文文本 (HTML CSS)

javascript - 计算div在div中的位置