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