Question

我有一个黑暗的分区框我想开发这样的东西，当你点击并按住鼠标在div上一个圆形div将透明，它将显示隐藏的句子在那个黑暗的div下。

Answer 1

给那个div框一个类，例如darkBox然后在css中你也可以点击“激活”属性 border-radius可以使它成圆形，如果你给50％它会使它成圆形，如果你想要角圆形或弯曲你可以给出小于这个的值

.darkBox:hover{
background-color: transparent;
border-radius: 50%;
}

我希望这有帮助，如果没有，请你告诉我你究竟需要什么

Answer 2

关键点：

使用border-radius: 50%可以很容易地形成圆形。
伪类:hover是激活备用状态的原因。
伪类:before（和:after）可以在元素中插入一些文本。
额外的褪色效果是使用transition完成的。

＆＃13;

.orb {
  font-size: 3em;
  border: 2px solid black;
  border-radius: 50%;
  height: 1.5em;
  width: 1.5em;
  text-align: center;
  cursor: pointer;
  background-color: black;
}
.orb:before {
  content: '\2620';
  transition: opacity 3.5s ease-in, color 4s linear;
  opacity: 0;
  color: transparent;
}
.orb:hover:before {
  content: '\2620';
  opacity: 1;
  color: white;
}
.cap:after {
  content: '';
  transition: opacity 3.5s ease-in, color 4s linear;
  opacity: 0;
  color: transparent;
}
.orb:hover .cap:after {
  content: 'The skull and crossbones is actually a font character';
  opacity: 1;
  color: red;
  font: 400 16px/.3 'Palatino Linotype';
  white-space: nowrap;
}

＆＃13;

<figure class="orb">
  <figcaption class="cap"></figcaption>
</figure>

＆＃13;

如何隐藏文字并点击

2 个答案: