1 reply [Last post]
DeepWater's picture
Last seen: 5 years 35 weeks ago
Timezone: GMT-4
Joined: 2017-03-25
Posts: 1
Points: 2

Real newbie here with what may be a really stupid question, but please bear with me, as there is something fundamental (almost philosophical...) I don't get; I'm not even sure I'm asking the question correctly:

Say I need a message to pop up: usually there's a button the user needs to click on to open the message box; in the message box itself there's usually a big "X" or "Cancel" area, which needs to be clicked on to return to the main page.

The appearance of the "open message" button is determined by something like this:

.button {
font-size: 1em;
cursor: pointer;


The appearance of the button when hovered over by the mouse, is determined by something like this:

.button:hover {
background: blue;

The appearance of the overlay is determined by something like this:

.overlay {
visibility: hidden;
opacity: 0;

And finally, the message box itself is something like this:

.popup {
margin: 20px auto;

What I don't understand is what causes the whole thing to open up on a click event; I can see the ".button:hover" but not a ".button:click", or anything like that. And, obviously, I have the same question about closing the message box and the overlay.

So there must be something basic about CSS philosophy that I don't get - any help would really be appreciated. And, again, apologizes if I'm not doing this correctly.

Tony's picture
Last seen: 1 week 6 days ago
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi DeepWater, Usually it

Hi DeepWater,
Usually it would be JavaScript that listens to the click event and opens or closes the popup.
You can sort off get a similar effect with CSS but really should be done with JavaScript.