使用css显示/隐藏div

Question

#editor-tags, #editor-smileys{
    display: none;
}

#editor-bold:hover #editor-tags {
    display: inline-block;
}

#editor-smiley:hover #editor-smileys {
    display: inline-block;
}

                                <div id="editor">
                                    <img src="data/img/buttons/bold.png" alt="bold" title="Open tags" class="point" id="editor-bold"> 
                                    <img src="data/img/smileys/happy.gif" alt="smileys" title="open smiley menu" class="point" id="editor-smiley">

                                    <div id="editor-tags">
                                        <span id="editor-insert-b"><b>[b][/b]</b></span>
                                        <span id="editor-insert-i"><i>[i][/i]</i></span>
                                        <span id="editor-insert-u"><u>[u][/u]</u></span>

                                        <span id="editor-insert-img">[img][/img]</span>
                                        <span id="editor-insert-url">[url][/url]</span>
                                    </div>

                                    <div id="editor-smileys">
                                        <span id="editor-insert-happy.gif"><img src="data/smileys/happy.gif" alt="happy"></span>
                                    </div>
                                </div>

再次问好stackoverflow！

我正在制作自己的论坛软件，我现在正在编辑。 好吧，我想在一个漂亮的菜单中制作标签和表情，只是，它没有出现？ 求救！

问候

修改

#editor {
    display: block;
}

#editor li ul {
    display: none;
}

#editor li:hover ul {
    display: block;
}

#editor {
    list-style-type:none;
}
#editor li.a { float: left; }
#editor li.a ul { list-style-type:none; }
#editor li.a ul li.b { display: block; }




<ul id="editor">
                                        <li class="a">
                                            <img src="data/img/buttons/bold.png" alt="bold" title="Open tags" class="point" id="editor-bold">
                                            <ul>
                                                <li id="editor-insert-b"><b>[b][/b]</b></li>
                                                <li id="editor-insert-i"><i>[i][/i]</i></li>
                                                <li id="editor-insert-u"><u>[u][/u]</u></li>

                                                <li id="editor-insert-img">[img][/img]</li>
                                                <li id="editor-insert-url">[url][/url]</li>
                                            </ul>
                                        </li>

                                        <li class="a">
                                            <img src="data/img/smileys/happy.gif" alt="smileys" title="open smiley menu" class="point" id="editor-smiley">
                                            <ul>
                                                <li id="editor-insert-happy.gif"><img src="data/smileys/happy.gif" alt="happy"></li>
                                            </ul>
                                        </li>
                                    </ul>
                                    <br>
                                    <br>

它无法正常工作，因为下面的东西被移动了。帮助

Answer 1

#editor-bold:hover #editor-tags {
    display: inline-block;
}

#editor-tags 不是#editor-bold的后代。

通常情况下，就是这样......

HTML

<ul>
    <li><h5>About</h5>
        <ul>
            <li>a</li>
            <li>b</li>
            <li>c</li>
        </ul>
    </li>
</ul>

CSS

ul li ul {
    display: none;
}

ul li:hover ul {
    display: block;
}

jsFiddle

要么是这样，要么使用JavaScript来实现它并保留HTML（尽管禁用JavaScript的用户可能会发现您的应用程序难以使用）。

更新

你可以使用jQuery ...

$('#editor-bold').hover(function() { $('#editor-tags').show(); }, function() { $('#editor-tags').hide(); });