Show/hide div using css

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>

Hello again stackoverflow!

Im making my own forum software, and im now doing the editor. Well i wanna make the tags and the smileys in a nice menu, only, it doesn't come up? Help please!

Greetings

edit

#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>

It doesn't work properly because verything underneath gets moved. Help?

alex · Accepted Answer · 2011-03-27 02:31:33Z

2

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

#editor-tags is not a descendent of #editor-bold.

Commonly, this is done something like so...

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.

Either that, or use JavaScript to do it and leave your HTML as is (though a JavaScript disabled user will probably find your application difficult to use).

Update

You could make it work using jQuery...

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

edited Mar 27, 2011 at 2:31

answered Mar 26, 2011 at 15:15

alex

492k205 gold badges891 silver badges992 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Thew Over a year ago

Well how can i fix it? Yeah, i know, set #editor-tags inside #editor-bold, but that will open inside it, how can i make it work then?

Collectives™ on Stack Overflow

Show/hide div using css

1 Answer 1

HTML

CSS

Update

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

HTML

CSS

Update

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related