How to to hide text and show on click

Question

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

Answer 1

give that div box a class eg darkBox then in css u can also give "active" property for clicking border-radius can make it round, if u give 50% it will make it circle, if u want corner edges round or curved u can give values less than this

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

I hope this helps ,if not can you please tell me what u exactly require

Answer 2

Key point:

• A round shape can easily be made by using border-radius: 50% .

• The pseudo-class :hover is what activates the alternate state.

• The pseudo-class :before (and :after ) can insert into an element some text.

• The extra fading effects were done with 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>