エディタがフォーカスされているときにツールバーを表示してから非表示にします

Question

私はウェブサイトでtextangularのツールバーとエディタを使用しています。私のページにはいくつかのエディタがあり、それぞれのエディタには独自のツールバーがあります。エディタ1にフォーカスするとtoolbar1が表示され、他のツールバーは隠されています。どのように私はそれを管理することができます。私は下のリンクを見たが、このソリューションは、隠れて、お互いに1つずつではないので、私にとっては有用ではないすべてのツールバーを示しています。 注：ページの読み込み時にすべてのツールバーが非表示になります。 私の質問には、より明確になるように1つのイメージを添付します。

Show TextAngular toolbar only when editor is in focus for multiple editors with 1 toolbar

Answer 1

は私がTextAngular慣れていないんだけど、一般的には： あなたは:focus擬似クラスと+隣接兄弟セレクタを使用してこれだけのCSSを行うことができます。

HTML：

<div class="container"> 
    <textarea></textarea> 
    <div class="toolbar"></div> 
</div> 
<div class="container"> 
    <textarea></textarea> 
    <div class="toolbar"></div> 
</div> 
<div class="container"> 
    <textarea></textarea> 
    <div class="toolbar"></div> 
</div> 

CSS：

.container { 
    width: 400px; 
    height: 250px; 
    position: relative; 
    margin-bottom: 50px; 
    padding-top: 30px; 
    border: 1px solid black 
} 

textarea { 
    width: 100%; 
    height: 100%; 
} 

.toolbar { 
    width: 100%; 
    height: 30px; 
    background: pink; 
    position: absolute; 
    top: 0; 
    display: none; 
} 

textarea:focus + .toolbar { 
    display: block; 
} 

参照：http://jsbin.com/qefokebaqe/edit?html,css,output

注：これは、特定の順序であることのマークアップに依存しています。 （うまくいけば、使用しているTextAngularの設定でこれが可能です）の後にツールバーはでなければならず、兄弟でなければなりません。 textarea:focus ~ .toolbar

参照：Is there a "previous sibling" CSS selector?

それはすぐに兄弟、または~であれば、それは、後に兄弟である場合は、+を使用することができます