如何隐藏文字并在点击时显示

Question

我有一个深色分隔框，当您在div上单击并按住鼠标时，我想开发这样的东西。一个圆形div将透明，并且它将在该深色div下显示隐藏的句子。

Answer 1

给该div框一个类，例如darkBox，然后在css中，您还可以为单击border-radius提供“ active”属性，以使其变为圆形；如果您给其50％的值，则将其变为圆形；如果您希望拐角边缘为圆形或弯曲，则可以给出小于此的值

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

希望对您有所帮助，如果不能，请告诉我您的确切要求

Answer 2

关键点：

• 通过使用border-radius: 50%可以轻松地制作圆形border-radius: 50% 。

• 伪类:hover是激活备用状态的元素。

• 伪类:before （和:after ）可以在元素中插入一些文本。

• 额外的衰落效果是通过transition完成的。

 .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; } 

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