html - CSS - 不显示弹出窗口

Question

我有以下代码:

CSS

#help {
        width: 100%;
        .titletext {
                float: left;
                font-size: 150%;
        }
        .helpimage {
                float: right;
                position: relative;
        }
        .helpimage .tooltip-content {
                display: none;
                position: relative;
                bottom: 5%;
                left: 5%;
                right: 5%;
                background-color: red;
                padding: .5em;
                line-height: 1em;
        }
        .helpimage:hover .tooltip-content {
                display: block;
        }
}

HTML/MEDIAWIKI

<div id="help">
    <div class="titletext">Gene information</div>
    <div class="helpimage">[[File:Help.png]]
        <div class="tooltip-content">
            <p>Here it'll be a little explanation of this table.</p>
        </div>
    </div>
</div>

随着鼠标悬停(在图像上方)，它显示Here it'll be a little explanation of this table

在图片下方，不是弹出...为什么会这样？

Answer 1

您正在嵌套您的 css 类，这在 CSS 中是不允许的，除非您可能正在使用预处理器？

我想你的 css 应该是这样的: http://jsfiddle.net/72o3x47p/2/

    #help {
            width: 100%;
    }
    .titletext {
            float: left;
            font-size: 150%;
    }
    .helpimage {
            float: right;
            position: relative;
    }
    .helpimage .tooltip-content {
            display: none;
            position: absolute; /* change from relative to absolute */
            top: 0;
            left: 0;
            background-color: red;
            padding: .5em;
            line-height: 1em;
    }
    .helpimage:hover .tooltip-content {
            display: block;
    }