使用css显示/隐藏div [英] Show/hide div using css
本文介绍了使用css显示/隐藏div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
＃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.pngalt =boldtitle =打开标签class =pointid =editor-bold>
< img src =data / img / smileys / happy.gifalt =smileystitle =打开笑脸菜单class =pointid =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.gifalt =happy>< / span&
< / div>
< / div>
再次尝试stackoverflow！
我自己的论坛软件，和im现在做编辑器。
我想让标签和表情在一个漂亮的菜单，只有，它不会出来？
$ b
#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.pngalt =boldtitle =打开标签class =pointid =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.gifalt =smileystitle =打开笑脸菜单class =pointid =editor-smiley>
< ul>
< li id =editor-insert-happy.gif>< img src =data / smileys / happy.gifalt =happy>< / li>
< / ul>
< / li>
< / ul>
< br>
< br>
它不能正常工作，因为下面的东西被移动。帮助？
解决方案
＃editor-bold：hover＃editor-tags {
display：inline-block;
}
＃editor-tags 不是 ＃editor-bold 的后代。
像这样做...
HTML
< ul> ;
< li>< h5>关于< / 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来做到这一点，可能会发现您的应用程序难以使用）。
更新
您可以使用jQuery 。
$（'＃editor-bold'）。hover（function（）{$（'＃editor-tags' .show（）;}，function（）{$（'＃editor-tags'）。hide（）;}）;
#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?
解决方案
#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;
}
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(); });
这篇关于使用css显示/隐藏div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
