#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>
它无法正常工作,因为下面的东西被移动了。帮助
答案 0 :(得分:2)
#editor-bold:hover #editor-tags {
display: inline-block;
}
#editor-tags
不是#editor-bold
的后代。
通常情况下,就是这样......
<ul>
<li><h5>About</h5>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</li>
</ul>
ul li ul {
display: none;
}
ul li:hover ul {
display: block;
}
要么是这样,要么使用JavaScript来实现它并保留HTML(尽管禁用JavaScript的用户可能会发现您的应用程序难以使用)。
你可以使用jQuery ...
$('#editor-bold').hover(function() { $('#editor-tags').show(); }, function() { $('#editor-tags').hide(); });