激活每个div顶部的按钮？

Question

我告诉他们查询，我想在定位指针光标时在右上方显示三个按钮，并在将指针光标从div中拉出时隐藏按钮。

就像这张照片。

Answer 1

您可以使用此库轻松获取它：

http://paulkinzett.github.io/toolbar/

Answer 2

一般的想法是将图标放在框内，将它们放在框外，默认隐藏它们，并用:hover伪类显示它们。

* {margin:0;padding:0;}
body {
  padding-top: 2em;
}
div {
  border: 1px solid black;
  width: 100px; height: 100px;
  position: relative;
}

ul {
  position: absolute;
  top: 0; right: 0;
  transform: translateY(-100%);
  display: none;
}
li {
  display: inline-block;
}
div:hover ul {
  display: block;
}

<div>
  <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
  </ul>
</div>

Answer 3

Twitter Bootstrap将标签和输入组合在一个form-group元素中。所以，假设这样的结构......

<div class="form-group">
  <div class="button-wrapper">
    <div class="button"></div>
    <div class="button"></div>
    <div class="button"></div>
  </div>
  <label for="exampleInput">Label 01</label>
  <input type="text" class="form-control" id="exampleInput">
</div>

您可以隐藏button-wrapper div，并通过定位父级的:hover州来显示它。

.button-wrapper {
  display: none;
}

.form-group:hover .button-wrapper {
  display: block;
}