当编辑器聚焦时显示工具栏然后隐藏它答案

【问题标题】：show toolbar when editor is focused then hide it当编辑器聚焦时显示工具栏然后隐藏它
【发布时间】：2016-08-06 08:55:56
【问题描述】：

我在我的网站中使用了 textangular 的工具栏和编辑器。我有一个问题让我很困惑。在我的页面中，我有一些编辑器，每个编辑器都有自己的工具栏。我的目的是，当编辑器 1 聚焦时，工具栏 1 显示，其他工具栏隐藏。当编辑器 2 聚焦时，只显示工具栏 2，其他工具栏隐藏，依此类推。我该如何管理它。我在下面看到了链接，但这个解决方案只适用于隐藏和显示所有工具栏，而不是一个一个地显示，所以它对我没有用。注意我希望所有工具栏都隐藏在页面加载中。为了更清楚，我在我的问题中附上了一张图片。

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

【问题讨论】：

标签： css focus editor toolbar textangular

【解决方案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 之后，并且它必须是兄弟。如果是直接兄弟，则可以使用 +，如果是后兄弟，则可以使用 ~：textarea:focus ~ .toolbar

见：Is there a "previous sibling" CSS selector?

【讨论】：